React semantic ui table.row set row active onclick

Question

How can i set a row with prop active={true} on click Table.Row React semantic UI

Sounds simple but I didn't find a way to do it. in the documentation I found nothing talking about.

I tried that way, but not worked,

      selectRow(key){
         let rowStatus = this.state.rowStatus[];
         for(let i in rowStatus){
           rowStatus[i] = false;
         }

         rowStatus[key] = true;
         this.setState({rowStatus:rowStatus});

      }

      renderRowTable(data){
        let row = [];
        let rowStatus = [];

        for(let i in data){

          rowStatus.push(false);

          row.push(
            <Table.Row key={i} active={this.state.rowStatus[i]} onClick={()=>{this.selectRow(i)}}>
              <Table.Cell title={data[i].code}>{data[i].code}</Table.Cell>
              <Table.Cell title={data[i].date}>{data[i].date}</Table.Cell>
            </Table.Row>
          );
        }

        this.setState({
          row:row,
          rowStatus:rowStatus
        });

      }

  render() {

    return (
      <div>
       <Table celled fixed singleLine compact size="small" sortable selectable>
            <Table.Header>
              <Table.Row>
                <Table.HeaderCell>Code</Table.HeaderCell>
                <Table.HeaderCell>Date</Table.HeaderCell>
              </Table.Row>
           </Table.Header>
           <Table.Body>{this.state.row}</Table.Body>
      </div>
    )
  }

Answer 1

You can keep the activeRowId in the state, and change its value on the row onClick. And while looping the rows, you can set the active property to true if the item's id is equal to activeRowId.

I heavily refactored your code like this:

import React, { Component } from "react";
import { Table } from "semantic-ui-react";

class App extends Component {
  state = {
    data: [
      { id: 1, code: "code1", date: "date1" },
      { id: 2, code: "code2", date: "date2" },
      { id: 3, code: "code3", date: "date3" }
    ],
    activeRowId: null
  };

  setActiveRow(id) {
    this.setState({
      activeRowId: id
    });
  }

  renderRowTable() {
    let rows = this.state.data.map(item => {
      return (
        <Table.Row
          key={item.id}
          active={item.id === this.state.activeRowId}
          onClick={() => {
            this.setActiveRow(item.id);
          }}
        >
          <Table.Cell title={item.code}>{item.code}</Table.Cell>
          <Table.Cell title={item.date}>{item.date}</Table.Cell>
        </Table.Row>
      );
    });

    return rows;
  }

  render() {
    return (
      <div>
        <Table celled fixed singleLine compact size="small" sortable selectable>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Code</Table.HeaderCell>
              <Table.HeaderCell>Date</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>{this.renderRowTable()}</Table.Body>
        </Table>
      </div>
    );
  }
}

export default App;

Codesandbox