Q:

How to give unique id to table rows in react

I need to give different IDs to table rows, so that when I click on the first row, it'll show "selectedRow: 1" on console. Click on the second row, it'll show "selectedRow: 2"
Thanks in advance!
Here's my code:
<tbody>
  {this.testData.map((item, i) => {
    return (
      <tr onClick={this.handler} key={i} >
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.address}</td>
      </tr>
    );
  })}
</tbody>

handler=(e)=>{
  let selectedRow = e.target.id //doesn't work
  console.log("selectedRow:", selectedRow)
}

A:

For that to work you would need to give every tr an id attribute, but it would be better if you just straight up pass that id to the function, like so:
<tr onClick={() => this.handler(item.id)}>

You can also use the index if the items don't have unique IDs.
Now the handler function would receive the id as an argument:
handler = (selectedRow) => {
    console.log("selectedRow:", selectedRow)
}

