twitter bootstrap - How to get particular row data on click of edit icon ReactJS? -

hi i'm using bootstrap table , used display data.

example :

how can particular row data when click edit icon?

code :

<table classname="table table-striped table-custom">     <thead>     <tr>         <td style={tablestyle}>date</td>         <td style={tablestyle}>bill no</td>         <td style={tablestyle}>amount</td>         <td style={tablestyle}>edit</td>         <td style={tablestyle}>delete</td>     </tr>     </thead>     <tbody>      {this.state.customerindividual.map(para => {         return <tr key={para.id}>             <td>{para.date}</td>             <td>{para.billno}</td>             <td>{para.amount}</td>             <td>                 <button classname="btn btn-primary btn-xs" onclick={this.editmode} data-title="edit" data-toggle="modal" data-target="#edit">                     <span classname="glyphicon glyphicon-pencil"></span>                 </button>             </td>             <td>                 <button classname="btn btn-danger btn-xs" onclick={this.editmode} data-title="delete" data-toggle="modal" data-target="#delete">                     <span classname="glyphicon glyphicon-trash"></span>                 </button>             </td>         </tr>     })}      </tbody> </table> 

bind unique identifier of each row onclick function, whenever click on edit button value, use value data state array.

value can use unique identifier index, id, amount, date etc.

write this:

{this.state.customerindividual.map((para, i) => {     return <tr key={para.id}>         <td>{para.date}</td><td>{para.billno}</td><td>{para.amount}</td>         <td><button onclick={this.editmode.bind(this, i)} ..... </button></td>         <td><button onclick={this.editmode.bind(this, i)} ..... </button></td>     </tr>; })} 

write editmode this:

editmode(index, event){     console.log('item index = ', index);     //data = this.state.customerindividual[index]; }