Passing down variable to handler in sub component in ReactJS

JavaScript
1

I have a AllPersons component, where I want to pass down a callback from my main app.js component, I want it so, I can edit a person, that I’m displaying inside my table.

My issue is that I need the id of the person, in order to change just that one person.

I’m mapping through an array of person objects and adding a button to make the callback

However, I need to pass the id inside to the handler so I can edit just that person

 <div className="col-md-6">
        <h3>All Persons</h3>
        <AllPersons persons={this.state.persons} onEdit= 
 {this.onEditHandler} id={this.id} />
      </div>


   //AllPersons.js
   {persons.map((person, i) => (

      <tr key={i}>
        <th>{person.age}</th>
        <th>{person.name}</th>
        <th>{person.gender}</th>
        <th>{person.email}</th>
        <a href="/#" onClick= {props.onEdit} id={person.id}>edit</a>
      </tr>


    //handle method inside App.js
      onEditHandler = (event) =>{
   event.preventDefault();
    console.log("editet")

  }

I was considering setting the id as a state, but I think that would be too much,

2

Something like (edit I just realised I changed the name of the handler while I was writing up the example, for editPerson read onEditHandler)

// App.js
state = {
  allPersons: [/* your list of people */],
  editPerson: this.editPerson.bind(this),
}

editPerson = (event, id) => {
  // NOTE using a button instead of an <a> tag
  // Would make this unecessary + you could
  // Remove the `event` parameter
  event.preventDefault();
  // Update your list of people as normal
  this.updateState(prevState => {
    /* Find the person and apply your update */
  });
}

render() {
  return (
    <AllPersons editPerson={this.state.editPerson}

{ /* in AllPersons */ }
<a
  href="/#"
  onClick= {e => props.editPerson(e, person.id) }
  id={person.id}>
  edit
</a>