How to make each row of the table clickable in React?

Question

There are quite a few answers that I found but none of them seem to work for my scenario.

I want to make each row clickable and log it on the console. How can I achieve this?

My React code is as follows:

class ConsumerList extends Component {
  handleClick = building => {
    console.log(building);
  };
  render() {
    return (
      <div className="table-responsive table-hover">
        <table className="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Farm</th>
              <th scope="col">Cost</th>
              <th scope="col">Change</th>
            </tr>
          </thead>
          <tbody>
            {this.props.buildings.map(building => (
              <tr key={building.id} onClick={() => this.handleClick(building)}>
                <th scope="row">{building.id}</th>
                <td>{building.name}</td>
                <td>{building.farmName}</td>
                <td>{building.cost}</td>
                <td className="text-success">
                  <FontAwesomeIcon icon={faArrowDown} />
                  {building.change}
                </td>
              </tr>
            ))}
          </tbody>
        </table>

      </div>
    );
  }
}

export default ConsumerList;

Answer 1

onClick={(building) => this.handleClick(building)} modify this in your code while adding the listener. You will get the log into the console.

Answer 2

You need a routing setup.Use the withRouter high order component, and wrap that to the component that will push to history so that you get access to the history object, to perform various routing operations.

Check out the official documentation for more info

import React from "react";
import { withRouter } from "react-router-dom";

class ConsumerList extends React.Component {

   handleClick = building => {
    console.log(building);
    this.props.history.push("/some/Path"); //path you want to redirect to
  };

  render() {
    return (
      <div className="table-responsive table-hover">
        <table className="table">
          <thead>
            <tr>
              <th scope="col">#</th>
              <th scope="col">Name</th>
              <th scope="col">Farm</th>
              <th scope="col">Cost</th>
              <th scope="col">Change</th>
            </tr>
          </thead>
          <tbody>
            {this.props.buildings.map(building => (
              <tr key={building.id} onClick={(building) => this.handleClick(building)}>
                <th scope="row">{building.id}</th>
                <td>{building.name}</td>
                <td>{building.farmName}</td>
                <td>{building.cost}</td>
                <td className="text-success">
                  <FontAwesomeIcon icon={faArrowDown} />
                  {building.change}
                </td>
              </tr>
            ))}
          </tbody>
        </table>

      </div>
    );
  }

}
export default withRouter(MyComponent);