How does the function get the event object when using currying in react event handlers?

I’ve seen it suggested to use currying when using an event handler such as onClick in react and you need to pass it both the event information and another parameter

So for example

handleClick = param => event => //some code using event and param

<button onClick={handleClick(param)}></button>

In my understanding calling a function inside the onClick is equivalent to doing something like
handleClick(param)()

But I’m not understanding how the event object is being passed in. Could anyone clarify?

eventHandlers are special attributes in both HTML and JSX. When declared an provided a value, an event handler attribute’s value will be called when that event triggers, and be passed the event. This is standard behavior, so if you write:

<button onclick="function(){window.alert('don't press that button again.');}">Don't press me</button>

as an HTML element, or
<FancyButton onClick={myHandleClick}/>
you will observe that behavior. Notice that in my first example, the anonymous function is still called and passed the event as a parameter, but it does nothing with it, since I never declared a variable by which to refer to it.

In your example, with a curried function acting as the event handler, the called function has to return a function as in the example below:

const handleClick = (event) => {
  return function(param){
    window.alert(`${param} was passed and the target's state was ${event.target.value}`);
  };
};

So, actually, in your example, your button is calling: handleClick()(param), not the order you wrote.

When I try this example it only gives me the correct information for event and param when I write it like

handleClick = param => event => {
 console.log(param);
 console.log(event)
}

You’re right, what’s happening is exactly this handleClick(param)(). React itself is calling it with the event argument, like this handleClick(param)(event), which is the same as if you’ve done this: (event) => handleClick(param)(event).

My bad. I got it backwards because I failed to follow my own reasoning in the earlier part of the post: Whatever is assigned to the attribute/props for an eventhandler will be passed the event as a parameter, which means that a call to handleClick(param) must return a function that can deal with or ignore event as a parameter. Curried functions still trip me up when I’m not writing them :slight_smile: