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

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.