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

Drew Reese · Accepted Answer · 2021-01-25 01:04:04Z

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

edited Jan 25, 2021 at 1:04

answered Jan 25, 2021 at 0:38

Drew Reese

207k20 gold badges282 silver badges293 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related