When should we use anonymous function in event listener in react?

Question

I am a React beginner. While learning React, sometimes I see people use anonymous functions in event listeners, I wonder if the below codes are the same. I think, to call function onDelete, we only need to use onClick={this.onDelete(id)}

    const cartItem=this.props.cart.map((bookCart)=>{
                return (    
    <Button onClick={()=>{this.onDelete(bookCart._id)}}>Delete</Button>
    )
},this;

and

    const cartItem=this.props.cart.map((bookCart)=>{
                return (    
    <Button onClick={this.onDelete(bookCart._id)}>Delete</Button>
    )
},this;

Dupe, check this, prob solves your doubts: stackoverflow.com/questions/42322553/… And also, regarding performance, this article is deff worth reading, will give you a lot of useful information if you're a React beginner: medium.com/@machnicki/… :) — elbecita
– elbecita, Commented Nov 10, 2017 at 22:54
Actually, your second example won't work since you're calling the function instead of just passing it. You have to use an arrow function or bind the arg. — Rick Jolly
– Rick Jolly, Commented Nov 10, 2017 at 23:13

Steve Holgado · Accepted Answer · 2017-11-11 00:13:30Z

7

You can use an arrow function when you need to pass arguments.

If you add parentheses to the function you are actually executing the function.

Therefore, with this code:

<Button onClick={ this.onDelete(bookCart._id) }>Delete</Button>

...you are setting onClick to the result of this.onDelete(bookCart._id)

If you use an arrow function like this:

<Button onClick={ () => this.onDelete(bookCart._id) }>Delete</Button>

...then you are setting onClick to a function that, when executed, will call this.onDelete with the parameters.

I hope this helps.

answered Nov 11, 2017 at 0:13

Steve Holgado

12.1k4 gold badges26 silver badges34 bronze badges

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

Collectives™ on Stack Overflow

When should we use anonymous function in event listener in react?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related