How do you pass a function with an argument to an onClick event in React?
You are probably all familiar with the fact that when passing a function that takes an argument to an onClick event (or any other event), you have to wrap it with an anonymous callback function.
For instance:
<button onClick = { () => myFunction(argument) } />
We do it because we want to have a pointer to a function triggered upon a click. If we pass the function without a callback, it will get fired right when the DOM is mounted.
But there is another option. We can pass an anonymous callback to our handler. This way, our handler itself will serve as a pointer, and we will not have to give an anonymous function to our onClick event. The name of this design pattern is called currying.
const myHandler = (text:string) => () => alert(`${text}`)
When is this useful?
It could be helpful when we intend to use our handler in many events (for example, mapping an array). Instead of creating useless callback functions for each event, we create them only once in the handler.
Top comments (5)
This is very confused - you are still passing an anonymous function to the
onClick
event - albeit one created by a higher order function - there are no 'pointers' involved. Also, you haven't curried anything here. Currying is the act of transforming a function that takes multiple arguments into a series of functions that each take 1 argument.The function you have named
myHandler
isn't a handler at all - it is a function that creates a handler. It would be better namedcreateHandler
.An example of currying a function:
Thank you! I was reading through this and thinking... this isn't currying at all.
This is confused, and incorrect. If you put
myFunction(x)
as an event handler, you are not passing a function. You are calling a function, and passing the result of that call as the event handler. If you actually pass a function - then you don't need to wrap it at all. In fact, most functions you would use as event handlers are functions that take an argument - that argument being the event object itself.It would’ve been helpful for me if the post contained a code example of use case suited to currying of a handler as I tend to gain a clearer understanding from the code.