[FIXED] How to apply onClick on tr except one td?

Issue

I have this table in my react component. I need to apply onClick on all the <tr> but need to exclude last column(<td>).

Is is possible to do that?

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, completeModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td>{activity.facility.name}</td>
</tr>

Solution

You can use stopPropagation() on click of the last td:

<tr
  className="cursor-pointer"
  key={activity._id}
  onClick={() =>
    activeTab === "active"
      ? this.setState({ activity, completeModal: true })
      : this.setState({ activity, showModal: true })
  }
>
  <td>{moment(activity.date).format("MM/DD/YY h:mm a")}</td>
  <td>{activity.manifestNumber}</td>
  <td>
    <NumberFormat
      thousandSeparator={true}
      displayType={"text"}
      value={activity.grossWeight}
    />{" "}
    lbs
  </td>
  <td onClick={e => e.stopPropagation()}>{activity.facility.name}</td>
</tr>

Answered By - Anurag Srivastava

Answer Checked By - Katrina (PHPFixing Volunteer)