How to get data from table row click using Semantic's React Table Component

Question

I am trying to get a value on click from a table that I render using Semantic UI with React. I generate my row using an immutable list and I want an onclick that gives access to a unique id value. When I log my attempt to extract the value in my callback, I get:

'bff3a3e9-489e-0e19-c27b-84c10db2432b' wrapped in a td tag

Relevant code:

  handleRowClick = (scen) => {
    console.log(Object.keys(scen.target));
    console.log(scen.target.);
  }

  mapScenarios = () => {
      return ((scen, i) => {
        return(
          <Table.Row key = {scen.get('id')} onClick = {this.handleRowClick}>
            <Table.Cell
              children={scen.get('id') || '(No ID)'}
            />
            <Table.Cell
              children={scen.get('name') || '(No Name)'}
            />
            <Table.Cell
              children={scen.get('actions').size === 0 ? 'none' : `${scen.get('actions').size} action(s)`}
            />
          </Table.Row>
        )
      })
  }

Answer 1

With semantic ui for react, the row click is not implemented well. On row click you actually get the value of the CELL from that row which is not what I wanted but I thought it worked because I was clicking on the cell that contained the Id. Here is the workaround.

  <Table.Row key = {scen.get('id')} onClick={() => this.props.tableRowClickFunc(scen.get('id'))}>