React - Arrow function vs bind() and event with argument

Question

I'm a newbie in react (even in JS). I'm made the following code in my App class:

nameChangeHandler = (event, personId) => {
//method code
};

render()
{
  <div>
    {this.state.persons.map((person, index) => {
      return <Person
          // nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
          nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}
      />
    })}
  </div>
}

I'm passing nameChangeHandler to Person component where I call it in onChange event in input tag (<input type="text" onChange={props.nameChangeHandler}/>)

Application works fine when I pass it in this way:
nameChangeHandler={(event) => this.nameChangeHandler(event, person.id)}
but it doesn't when I do it like this:
nameChangeHandler={this.nameChangeHandler.bind(this, person.id)}

It fails with an exception when I'm trying to acces event.target.value in nameChangeHandler method.

How can I pass event and argument to this method using bind() method instead of arrow function?

I've heard we should always use bind() approach over the arrow function because an arrow function approach could render component many times.

Is there any special use cases and differences between bind() and arrows functions?

You cannot rebind the arrow function `nameChangeHandler`! https://stackoverflow.com/questions/33308121/can-you-bind-arrow-functions — Dehan, Apr 11 '19 at 13:22

score 5 · Accepted Answer · answered Apr 11 '19 at 13:16

5

It's a matter of timing.

When you use bind, the arguments map on to the function you are binding in the order you bind them followed by any that are passed to the new function.

When you use an arrow function, you are explicitly passing them in the order you determine.

Your function expects event to be the first argument, so when you use an arrow you function you pass event, person.id. However, when you bind you pass person.id (the first argument) and when the function is called with event you pass that (as the second argument).

This means you arguments end up the wrong way around.

Since you only have person.id when you call bind and you don't get event until later, the only way you can use bind for this is to change the original function so it accepts the arguments in a different order.

nameChangeHandler = (personId, event) => {

answered Apr 11 '19 at 13:16

Quentin

914,110
126
1,211
1,335

Shouldn't be function a normal one instead of arrow function. `nameChangeHandler = (personId, event) => {`. Because he is binding `this`?. Is there any other use of arrow function here? – Maheer Ali Apr 11 '19 at 13:18
@MaheerAli — It depends on if they need to rebind `this` or not. This answer deals with the arguments being wrong. – Quentin Apr 11 '19 at 13:25
@Quentin So after swapping method arguments, the `{(event) => this.nameChangeHandler(person.id, event)` will be equivalent for `{this.nameChangeHandler.bind(this, person.id)}`, wihout any sides effects? Am I right? – Kamil W Apr 11 '19 at 13:30
@KamilW — Subject to comments about `this`, yes. – Quentin Apr 11 '19 at 13:31

React - Arrow function vs bind() and event with argument

1 Answers1