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.
Please Login to comment...