What's the React way to manipulate multiple elements according to event of another element?

Question

I am confused about this for a long time.
Here is the case:
1, I create a table with multiple rows, in this way:

    tableRow(basicInfoArray) {
    return basicInfoArray.map((basicInfo, index) => (
      <tr
        key={basicInfo._id}
        className={index % 2 === 0 ? 'alt' : null}
        onClick={event => this.props.showDetail(basicInfo._id, event)}
      >
        <td>{basicInfo.mentee_id}</td>
        <td>{`${basicInfo.firstname} ${basicInfo.lastname}`}</td>
        <td>{basicInfo.othername}</td>
        <td>{basicInfo.location}</td>
      </tr>
    ));
  }

2. As you can see, I bind a onClick event to each row. If the row is clicked, it will highlight, and there will be a drilldown to show detail information.

3. The question is here, after clicked on the backdrop(which bind a onClick event), the drilldown hide and I should remove the highlight effect from the row. Currently I use this way:

    const highLightRows = document.getElementsByClassName('highLight'); for (let i = 0; i < highLightRows.length; i += 1) { highLightRows[i].classList.toggle('highLight'); } 

As the documents of React.js says that it's not a good practice to manipulate the dom directly, the UI change should be caused by the props/state change. Obviously it's not a good idea to bind a state for each row of the table because of the quantity. What's the best practice to do this?

Answer 1

It's important to keep in mind that react renders whatever you have in memory, in this case you have an array of items that you want to display in a table, when clicking any of those items you want to highlight the selected, right?

Well, for that you could define a property in each element of the array called selected , this property will be true/false depending on the user selection, then when rendering the row you will check for this property and if it's there you will assign the highLight class or not. With this approach you will only need to worry to change the value of this property on memory and it will automatically get highlighted on the DOM.

Here's an example:

renderRow(info, index) {
  const styles = [
    index % 2 === 0 ? 'alt' : '',
    info.selected = 'highLight' : '',
  ];

  return (
    <tr
      key={info._id}
      className={styles.join(' ')}
      onClick={event => this.props.showDetail(info, event)}
    >
      <td>{basicInfo.mentee_id}</td>
      <td>{`${info.firstname} ${info.lastname}`}</td>
      <td>{info.othername}</td>
      <td>{info.location}</td>
    </tr>
  );
}

renderContent(basicInfoArray) {
  return basicInfoArray.map((basicInfo, index) => this.rendeRow(basicInfo, index));
}

Just make sure to set to true the selected property on showDetail function, and then set to false when you need to hide and remove the highLight class.

Good luck!