Whatever is in the curly braces is what is returned to the listener. The listener is expecting a function that will be called when the event is fired.
onClick={handleDelete(id)}
This won't work because you're calling handleDelete immediately and assigning the result of calling that function to the listener. That function may return an explicit value or undefined (note: that explicit value may be a a new function (closure) which can be assigned to the listener - but in this case I doubt this is happening).
onClick={() => handleDelete(id)}
This will work because you're assigning a function to the listener, and when the event is fired it will call that function which, in turn, will call handleDelete(id).
onClick={handleDelete}
This will also work because you're passing a reference to the handleDelete function to the listener, and that function will get called when the event is fired.
(Note: doing it this way would mean that the component would need to be rewritten to have a data-id attribute that the function can pick up because you're no longer sending an explicit id argument to handleDelete when you call it.)
Videos
How to handle multiple button onClick events in React?
How to trigger a click event in a React functional component?
What is the event target in React?
Whatever is in the curly braces is what is returned to the listener. The listener is expecting a function that will be called when the event is fired.
onClick={handleDelete(id)}
This won't work because you're calling handleDelete immediately and assigning the result of calling that function to the listener. That function may return an explicit value or undefined (note: that explicit value may be a a new function (closure) which can be assigned to the listener - but in this case I doubt this is happening).
onClick={() => handleDelete(id)}
This will work because you're assigning a function to the listener, and when the event is fired it will call that function which, in turn, will call handleDelete(id).
onClick={handleDelete}
This will also work because you're passing a reference to the handleDelete function to the listener, and that function will get called when the event is fired.
(Note: doing it this way would mean that the component would need to be rewritten to have a data-id attribute that the function can pick up because you're no longer sending an explicit id argument to handleDelete when you call it.)
Before explaining the differences, you have mismatching braces in the second one.
The second one is called an invoked function. That means when the component mounts the function, it runs without clicking the button. The other one is a callback function. It will run when the user clicks the button.
Hey, how's it going?
I am working on a react app to play a card game. When a user clicks a card, I want it to trigger an onClick function that is mostly the same but slightly different for each card. Is there a way to assign onClick functions with parameters to do this?
If I do something like onClick={handleClick(parameter)}, it assigns the result of the function call to onClick, which is not what I want. Currently, as a workaround, I have a function which builds other functions that use the correct parameters like this:
function handleClick(parameter) {return () => {console.log(parameter)} }
but I would like a cleaner solution. If every card has a unique onClick I end up making like 20 anonymous functions that all do basically the same thing everytime my component re-renders, which feels messy and gross.
Does anyone know a way to do this, or is it not possible?