Pass Multiple Props in ReactJS Event Handler

Passing multiple props in a single event handler in ReactJS can be useful for situations where more than one value needs to be worked on based on some user input.

In this article, we will discuss three different ways to pass props in a single event handler in ReactJS. Here is a list of approaches:

• Using Arrow Functions
• Using bind() Method
• Using Event Object

Using Arrow Functions

To pass multiple props in a single event handler, we will use the most popular approach i.e. by using an arrow function within the event listener. This method enables you to define arguments to be passed explicitly when handling an event.

Example

The following example implements above mentioned steps to pass multiple props in a single event handler.

import React from 'react';
const Button = ({ name, age, handleClick }) => {  return (
<button onClick={() => handleClick(name, age)}>
  Click Me
</button>
);};

const App = () => {  const handleButtonClick = (name, age) => {    alert(`Name: ${name}, Age: ${age}`);  };  return (
<div>
<Button name="Click" age={30} handleClick={handleButtonClick} />
</div>

  );};
export default App;

• In the above code, the button component takes name, age, and handleClick as props.
• On clicking the button, an arrow function passes name and age as arguments to handleClick.
• The handleButtonClick function in app then displays an alert with the received values i.e. name and age.

Using bind Method

In this approach, we pass the props using the bind() method. It is used when you want to specify some arguments ahead of time, and you do not want to use an arrow function within the JSX.

Example

The following example implements the above mentioned steps to pass multiple props using the bind() method.

  
const Button = ({ name, age, handleClick }) => {  
  return (  
    <button onClick={handleClick.bind(null, name, age)}>  
      Click Me  
    </button>  
  );  
};  

• In above code, the bind(null, name, age) method returns a new function where name and age are set as arguments.
• When you click the button, the handleClick function receives these arguments as they are already set.

Using Event Object

In this approach, you need access to the event object as well as multiple props. You can modify the handler function as per your need.

Example

The following example demonstrates how to pass an event object along with multiple props.

  
const Button = ({ name, age, handleClick }) => {  
  return (  
    <button onClick={(event) => handleClick(event, name, age)}>  
      Click Me  
    </button>  
  );  
};  

const App = () => {  
  const handleButtonClick = (event, name, age) => {  
    event.preventDefault();  
    console.log(`Clicked by ${name}, Age: ${age}`);  
  };  

  return (  
    <div>  
      <Button name="Alice" age={25} handleClick={handleButtonClick} />  
    </div>  
  );  
};  

export default App;  

• In the above example code, the event object is directly passed to handleClick along with name and age.
• The event.preventDefault() is used inside handleButtonClick to prevent the default behavior if needed.

Conclusion

Passing multiple props in a single event handler is a common pattern in React. In this article, we have used three different approaches. These approaches are: using arrow functions for simple, inline event handling, using The bind() method to predefine arguments, and by explicitly passing the event object when event details are required. Each approach has its use cases, and you can choose one accordingly.