How to pass arguments to event handlers in React

In this tutorial, you’re going to learn how you can pass extra arguments to the event handlers in React

A typical way to call an onClick event handler in a React function component.

<button onClick={handleClick}> Click me </button>

How to pass a single argument

Suppose you want to pass an extra argument along with an event object to the onClick event handler.

You can define an arrow function inside the onClick interpolation, to call the handleClick event handler with an extra argument.

Example:

const handleClick(event, arg1) {
  console.log(arg1)
}

return (
  <button onClick={(event)=>handleClick(event, 'hello')}> Click me </button>
);

How to pass multiple arguments

Similarly, you can pass more than one argument to the onClick event handler.

Example:

const handleClick(event, arg1, arg2) {
  console.log(`${arg1} , ${arg2}`);
}

return (
  <button
    onClick={(event)=>handleClick(event, 'hello', 'world')}
  >
    Click me
  </button>
);

Related Solutions

• How to scroll to top of the page in React

• How to achieve conditional routing in React using react router dom

• How to conditionally add props to React component

• How to trigger button onclick event on Enter key press in React