Can't apply an onClick function to <TableRowColumn> in React with Material-UI

Question

I formerly had functionality whereby I could click on the cell of a table and it would toggle the colour of the text between red and green.

I have since implemented Material-UI in the React app, replacing the <td> tags with <TableRowColumn> tags, to which now I find that the onClick event no longer works.

I have tested the functionality of onClick by placing a <button> within the <TableRowColumn> , which DOES infact work. So this leads me to believe that the <TableRowColumn> element does not have the option for onClick...

Working

return (
        <tdstyle={taskStyle} onClick={this.props.toggleTask.bind(this, task)}>
            {task} <button >Click</button>
        </td>
    )

Broken (The colour change functionality works when called from the button)

return (
        <TableRowColumn style={taskStyle} onClick={() => this.help()}>
            {task} <button onClick={this.props.toggleTask.bind(this, task)} >Click</button>
        </TableRowColumn>
    )

Function

toggleTask(task) {
    const foundToDo = _.find(this.state.todos, todo => todo.task === task);
    foundToDo.isCompleted = !foundToDo.isCompleted;
    this.setState({ todos: this.state.todos });
  }

Answer 1

I believe you have to add an onCellClick function to the Table component that takes the row and column indices as parameters.

handleCellClick(row, column, e) {
if(row == 0)
   ...
if(column == 0)
   ...
}

You may have to implement a way to lookup the task based its column & row. This would handle changing the color of the cell's text