javascript - Passing parameters to event handler from a functional component without using inline syntax

Question

I have following code where I need to pass index value to the event handler which I am getting as a prop from another component. How can I achieve this without using the inline syntax, as inline syntax is not considered as a good approach since it may lead to the creation of new function each time the component re-renders?

const Persons = (props) => {
  return (props.persons.map((person, index) => {
    return <Person
      click={() => props.click(index)}
      name={person.name}
      age={person.age}
      key={person.id}
      changed={(event) => props.changed(event, person.id)} />
  }));
}

question from:https://stackoverflow.com/questions/65877521/passing-parameters-to-event-handler-from-a-functional-component-without-using-in

Answer 1

The in-line anonymous function is fine in most cases, but if you want to not do that you can create a curried handler to attach.

const changeHandler = id => event => {...};
const clickHandler = index => () => {...};

This function consumes and encloses an id variable and returns a function that consumes an event object. This returned function is what elements/components will use as a callback.

Pass to component

<Persons click={clickHandler} change={changeHandler} />

And attach callback to handler

const Persons = (props) => {
  return (props.persons.map((person, index) => {
    return <Person
      click={props.click(index)}
      name={person.name}
      age={person.age}
      key={person.id}
      changed={props.changed(person.id)} />
  }));
}