javascript - I don't know the difference between the two in the event handling process in React

Question

onRemove(id) is a function which filtering id that gets from parameter.

case 1)

const namesList = names.map(name => (<li key={name.id} onDoubleClick={onRemove(name.id)}>
{name.text}</li>));

case 2)

const namesList = names.map(name => (<li key={name.id} onDoubleClick={()=> onRemove(name.id)}>
{name.text}</li>));

I don't know the difference between case 1 and case 2.

question from:https://stackoverflow.com/questions/65545867/i-dont-know-the-difference-between-the-two-in-the-event-handling-process-in-rea

Answer 1

In the first case you are passing parameter id without using binding and in the second case you are using arrow function to pass the parameter which is equvalent to binding.

Expected behaviour

case 1 onRemove(id) function will be call immediately after component render (in example you will see console log on each refresh)

case 2 onRemove(id) function will be call when you make double click(in example you will see console log on double click)

To know more about passing parameter and how to bind a function follow this,this

Example