Passing down variable to handler in sub component in ReactJS

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={} />

   {, i) => (

      <tr key={i}>
        <a href="/#" onClick= {props.onEdit} id={}>edit</a>

    //handle method inside App.js
      onEditHandler = (event) =>{


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

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
  // 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 */ }
  onClick= {e => props.editPerson(e, }