How do I get the <td> values in a row onClick - reactjs

Question

import React from 'react';
import { Table } from 'reactstrap';
import './SearchDataTable.css'
const SearchDataTable = (props) => {
const serverData = props.serverData
const handleRowClick = (rowValue) => {
console.log(rowValue)
}
return(
<div>
<Table bordered>
<thead>
<tr>
<th>Affected</th>
<th>Type</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{props.sortData ? (serverData.sort((a,b) => a.quantity - b.quantity).map(data => (
<tr className="table-row" onClick={(e) => handleRowClick(e)} key={data.quantity}>
<td>{data.affectedOn}</td>
<td>{data.type}</td>
<td>{data.quantity}</td>
</tr>
))):(serverData.sort((a,b) => b.quantity - a.quantity).map(data => (
<tr key={data.quantity}>
<td>{data.affectedOn}</td>
<td>{data.type}</td>
<td>{data.quantity}</td>
</tr>
))) }
</tbody>
</Table>
</div>
)
}
export default SearchDataTable;
From the above code I tried getting the corresponding <td> value onClicking the row. I added the onClick on <tr> and tried, but failed in doing it. I need some help in solving this.

Answer 1

Instead of passing e to handleRowClick, pass the data.
import React from 'react';
import { Table } from 'reactstrap';
import './SearchDataTable.css'
const SearchDataTable = (props) => {
const serverData = props.serverData
const handleRowClick = (rowValue) => {
console.log(rowValue)
}
return(
<div>
<Table bordered>
<thead>
<tr>
<th>Affected</th>
<th>Type</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{props.sortData ? (serverData.sort((a,b) => a.quantity - b.quantity).map((data, index) => (
<tr className="table-row" onClick={() => handleRowClick(data)} key={index}>
<td>{data.affectedOn}</td>
<td>{data.type}</td>
<td>{data.quantity}</td>
</tr>
))):(serverData.sort((a,b) => b.quantity - a.quantity).map((data, index) => (
<tr key={index}>
<td>{data.affectedOn}</td>
<td>{data.type}</td>
<td>{data.quantity}</td>
</tr>
))) }
</tbody>
</Table>
</div>
)
}
export default SearchDataTable;
Also replaced the key on the rows with index instead of quanity, since it seems like quantity would not be a unique identifier. Ideally, you would have something else that is unique, like an id property, but index can be okay if not.

Answer 2

const handleRowClick = (data) => {
console.log(data.affectedOn, data.type, data.quantity)
}
....
<tr onClick={() => this.handleClick(data)}>
<td>{data.affectedOn}</td>
<td>{data.type}</td>
<td>{data.quantity}</td>
</tr>
....