how can my modal know index in row clicked reactjs - asp.net

Question

I am a beginner in this language I've used php before.
So the table has a button and when I clicked the button it only read the first row it won't read the other rows, In php ive used the function attr so it will read the other clicked row and here at reactjs i don't know how please help
return <tr key={i} >
<td>{d.Employee_Name}</td>
<td>{d.Address}</td>
<td><center><button className ="btn btn-info" onClick={ this.props.onClick } data-toggle="modal" data-target="#UpdateEmployee">Update</button></center></td>
<td><center><button className ="btn btn-danger">Delete</button></center></td>
<div className="modal fade" id="UpdateEmployee" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Update Employee</h4>
</div>
<div className="container">
<div className="modal-body">
<table>
<tbody>
<tr>
<td>Name</td>
<td> <input type="text"value={ d.Employee_Name} /> </td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" value={ d.Address} /> </td>
</tr>
</tbody>
</table>
</div>
</div>
<div className="modal-footer">
<botton className="btn btn-info"> Update Employee</botton>
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</tr>
}

Answer 1

To get the index of item clicked, you need to bind the index to onClick function for each element, like this:
<td>
<center>
<button ... onClick={() => this.props.onClick(i) }></button>
</center>
</td>
Note: replace ... by other properties you are using.
Whenever you click on any item, index i will get passed to this.props.onClick method, you can check that by using console.log in parent onClick function, like this:
onClick(index){
console.log(index); // it will print the index of item clicked
}