How to pass multiple props in a single event handler in ReactJS?

To pass multiple props in a single event handler in ReactJS we can create a function to handle the event that accepts multiple props or calls multiple methods. It is a normal task while creating a react project to perform multiple operations for some events.

Prerequisites

• React JS
• React JS Props

To pass/call the multiple props methods in a single event handler in ReactJS there are two ways to make it work.

Method 1: Defining specific methods

We can make a separate method for the event and call all the props methods in that method. 

Syntax

const seperateMethod = () => {
 props.method1()
 props.method2()
}

Method 2: Using anonymous methods

We can create an anonymous function and call all the props methods inside the anonymous method.

Syntax

<Component onClick={() => {
 props.method1();
 props.method2()
}}>
</Component>

Steps to create React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure:

👁 Image

Example: Passing multiple props in a single event handler with both methods

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

👁 Image