Pass event args and event object to event handler without arrow function in ReactJS

Question

So, I've been looking around for the correct way to pass both a parameter object and the event object to an event handler in react. Is there a best practise?

The only way I found is to use an arrow function and pass in both the event object and the parameter, like this.

<Button onClick={(e) => this.updateProgress(e, 1)} >Increase</Button>

Which is discouraged by the official documentation due to the possibility of multiple callback bindings in some scenarios.

https://facebook.github.io/react/docs/handling-events.html

Is there a way to pass along both the event object and an event args object to the event handler without using an arrow function?

Yeah you can call a function which would call another function with the argument. That would be even more messier — Arshabh Agarwal
– Arshabh Agarwal, Commented Mar 5, 2017 at 12:39
@ArshabhAgarwal I saw a blog post with that pattern, looked messy. — Molotch
– Molotch, Commented Mar 5, 2017 at 20:33
Yes! Just do what you are doing now. The answer below is quite correct. — Arshabh Agarwal
– Arshabh Agarwal, Commented Mar 5, 2017 at 20:36

Chris · Accepted Answer · 2017-03-05 12:50:03Z

4

I've never it actively discouraged. The part of the documentation you are referring to is when you aren't passing extra arguments.

When you are passing arguments, the way you have presented is exactly the way to do it.

Edit The exception would be if the arguments are somehow constants (I can't think of a case when they would be, just flagging).

This pattern (the one you presented) is important especially for handlers within loops, where each item needs to call a callback/handler, but forward on an id or key or index.

answered Mar 5, 2017 at 12:50

Chris

58.9k34 gold badges158 silver badges198 bronze badges

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

1 Comment

Molotch Over a year ago

Thanks, thought it was discouraged in general but if there isn't a better way to pass parameters I guess it is the way to go.

Yangshun Tay · Accepted Answer · 2017-03-05 20:43:29Z

1

The alternative is to use .bind but it's not recommended because a new function is created upon each render() call.

updateProgress(arg, event) {
  console.log(arg, event); // Prints: 1 Proxy {dispatchConfig: Object ...
}

render() {
  return
    ...
    <Button onClick={this.updateProgress.bind(this, 1)}>Increase</Button>
}

edited Mar 5, 2017 at 20:43

answered Mar 5, 2017 at 17:23

Yangshun Tay

53.7k34 gold badges126 silver badges150 bronze badges

3 Comments

Molotch Over a year ago

Isn't this worse still? It binds on every button click, not just on every render? Or am I misunderstanding?

Yangshun Tay Over a year ago

It's correct, it binds on every render. Every button click calls the bound function which is updateProgress

Matt Browne Over a year ago

This is basically the same thing; an arrow function creates a new function on each render() call too. The main advantage of the arrow function is that it arguably has cleaner syntax.

Collectives™ on Stack Overflow

Pass event args and event object to event handler without arrow function in ReactJS

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related