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?

@Matheus Reis solutions works perfect.

marcode_ely
– marcode_ely

2018-07-04 20:18:11 +00:00
Commented Jul 4, 2018 at 20:18 — marcode_ely
– marcode_ely, Commented Jul 4, 2018 at 20:18

reisdev · Accepted Answer · 2018-07-03 13:56:39Z

11

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.

edited Jul 3, 2018 at 13:56

answered Jul 3, 2018 at 13:49

reisdev

3,4202 gold badges20 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

marcode_ely Over a year ago

Thanks Matheus, I'm testing your idea.

marcode_ely Over a year ago

Thanks a lot @Matheus Reis your solution works like a charm.

Rohit Gautam Over a year ago

This works thank you, But I also want to bind data values in another component how can I do this?

reisdev Over a year ago

@RohitGautam the other component is in the same level? If so, you just need to pass it as a prop. If not, you will need redux

reisdev Over a year ago

@SachinMuthumala that's probably because you're passing the wrong parameter to the function

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related