React JS - Get data from row in rendered table to edit data

Question

I'm developing a way the admon can edit stored data in ParseServer.

I implemented a way to search records, filter data and re-render again. Now, my need is edit the fetched data and update the record via UPDATE VERB.

How could get the row data?. For example console.log the the "Código".

This my source code:

render() {
    return (
     <table className="table table-hover table-bordered">
                                <thead>
                                <tr>
                                    <th scope="col"><center>Edit</center></th>
                                    <th scope="col"><center>#</center></th>
                                    <th scope="col"><center>Código</center></th>
                                    <th scope="col">Nombres</th>
                                    <th scope="col">Apellidos</th>
                                    <th scope="col">Grado</th>
                                </tr>
                                </thead>
                                <tbody id="cursorPointer">
                                   {/*Rendering data*/}
                                    {this.state.data.map(function(item, key) {
                                        return (
                                            <tr key = {key} >
                                                <td><center><button ... > Edit </button></center></td>
                                                <td><center>{item.objectId}</center></td>
                                                <td><center>{item.Codigo}</center></td>
                                                <td>{item.Nombres}</td>
                                                <td>{item.Apellidos}</td>
                                                <td>{item.Grado}</td>
                                            </tr>
                                        )
                                    })}
                                </tbody>
                            </table> 
  )
}

Any idea?

Answer 1

You can create a method edit that will receive the data of the row, and call it on the button Edit:

edit = (data) => { 
    // Do whatever you want
}
render() {
    return (
     <table className="table table-hover table-bordered">
           <thead>
              <tr>
                 <th scope="col"><center>Edit</center></th>
                 <th scope="col"><center>#</center></th>
                 <th scope="col"><center>Código</center></th>
                 <th scope="col">Nombres</th>
                 <th scope="col">Apellidos</th>
                 <th scope="col">Grado</th>
              </tr>
           </thead>
           <tbody id="cursorPointer">
              {/*Rendering data*/}
              {this.state.data.map( (item, key) => {
                 return (
                      <tr key = {key} >
                      <td>
                        <center>
                           <button onClick={() => this.edit(item)}>Edit<button>
                        </center>
                      </td>
                      <td><center>{item.objectId}</center></td>
                      <td><center>{item.Codigo}</center></td>
                      <td>{item.Nombres}</td>
                      <td>{item.Apellidos}</td>
                      <td>{item.Grado}</td>
                   </tr>
                 )
              })}
        </tbody>
     </table> 
  )
}

PS: Note that the function of the map needs to be an arrow function, to bind the component to it, then it can access the edit method.