Как выделить активный элемент таблицы в react.js?

1
2
3
4
5
6

constructor(props) {
  super(props);
  this.state = {
    activeRow: null
  };
}

1
2
3

handleClick(row) {
  this.setState({ activeRow: row });
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

render() {
  const { data } = this.props;
  const { activeRow } = this.state;
  
  return (
    
      {data.map(row => (
         this.handleClick(row)}
          className={row === activeRow ? "active" : null}
        >
          
      ))}
    {row.id}
          {row.name}
          {row.value}
        
  );
}

1
2
3

.active {
  background-color: #ccc;
}