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

Last Updated : 31 Mar, 2021

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

Method 1: We can make a separate method for the event and call all the props method in that method.
Syntax:
```
const seperateMethod= () => {
 props.method1()
 props.method2()
}
```
Method 2: We can create an anonymous function and call all the props method inside the anonymous method.
Syntax:
```
<Component onClick={() => { 
  props.method1(); 
  props.method2() 
}}>
</Component>
```

Creating 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: It will look like the following.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

import React from 'react';
export default class App extends React.Component {
  
  sayHi = () => {
    alert("Hi from GFG");
  }
  sayHello = () => {
    alert("Hello from GFG");
  }
  
  render() {
    return (
      <div style={{ marginLeft: 50 }}>
        <Child1 m1={this.sayHi} 
                m2={this.sayHello} >
        </Child1>
        <br></br>
        <Child2 m1={this.sayHi} 
                m2={this.sayHello}>
        </Child2>
      </div>
    )
  }
}
  
// Method 1
class Child1 extends React.Component {
  
  seperatemethod = () => {
    this.props.m1();
    this.props.m2();
  }
  
  render() {
    return (
      <div>
        <button onClick={this.seperatemethod}>
          Hello Hi from GFG
        </button>
      </div>
    )
  }
}
  
// Method 2
class Child2 extends React.Component {
  
  render() {
    return (
      <div>
        <button onClick={() => {
          this.props.m1();
          this.props.m2();
        }}
        >Hello hi from GFG</button>
      </div>
    )
  }
}

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:

Explanation: As we can see from the above code Child1 component is calling the multiple props using method 1, by creating a separate method and the child2 component is calling the multiple props by creating an anonymous method.

My Personal Notes

Related Articles

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

App.js