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)} /> })); }
Advertisement
Answer
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)} /> })); }