Event handlers arguments in React

4 ways for event handlers in React

const ExampleButton = ({ onClick, children }) => (
  <button onClick={onClick}>{children}</button>
);

export default function App() {
  // 1.
  // Our handler gets just an event,
  // as we pass it as a reference to the onClick
  // how do we include more parameters???
  const handleClick = (event) => {
    console.log("We just get an event (Synthetic): ", event);
  };

  // 2.
  // We have a name parameter, but no event?
  const handleClickCustomArguments = (name) => {
    alert(`My name is: ${name}`);
  };

  // 3.
  // We can have both, custom parameter and an event
  const handleClickCustomArgumentsAndEvent = (event, name) => {
    console.log("Event: (Synthetic)", event);
    alert(`My name is: ${name}`);
  };

  // 4.
  // Currying
  const handleClickCurrying = (name) => (event) => {
    console.log("Event: (Synthetic)", event);
    alert(`My name is: ${name}`);
  };

  return (
    <>
      <ExampleButton onClick={handleClick}>Just an event</ExampleButton>
      {/* We're using an anonymous function to pass our custom argument */}
      <ExampleButton onClick={() => handleClickCustomArguments("Adrian")}>
        Custom name argument
      </ExampleButton>
      {/* We can still pass both */}
      <ExampleButton
        onClick={(event) => handleClickCustomArgumentsAndEvent(event, "Adrian")}
      >
        Event + custom argument
      </ExampleButton>
      <ExampleButton onClick={handleClickCurrying("Adrian")}>
        Currying
      </ExampleButton>
    </>
  );
}

Summary

• 1. Reference - We pass the handler function as a reference to onClick. The handler automatically receives the Synthetic event as its only argument. This is the simplest approach but limits us to just the event.
• 2. Anonymous function - We wrap the handler call in an anonymous arrow function () => handleClickCustomArguments("Adrian"). This lets us pass custom arguments but we lose access to the event object.
• 3. Custom arguments + event - By using an anonymous function that receives the event (event) => handleClickCustomArgumentsAndEvent(event, "Adrian"), we can forward both the event and custom arguments to our handler.
• 4. Currying - The handler is a function that returns another function: (name) => (event) => { ... }. We call the outer function with our custom argument in the JSX, and React calls the returned inner function with the event. This is a clean, reusable pattern.