How to pass a parameter to an event handler or callback ?

30 Aug, 2021
React js is one of the most popular JavaScript frameworks today. There are a lot of companies whose websites are built on React due to the framework’s unique features. React UI comprises several components. There are a lot of tasks that users can perform on a React user interface. Each component has different HTML elements where the user can click, hover or trigger any form of event.  
Event Handlers: Events are the signals sent when there is a change in the UI. Users may click hover drag the mouse or press any key to perform these events. To respond to these changes users can write event handler code. You need to keep these 2 points in mind while working with React events.
React events are named in the format of camelCase (onChange instead of onchange).
React event handlers are placed inside curly braces (onChange={handleSubmit} instead of onChange=”handleSubmit”).
Approach: Let us create a React project and then we will create a event handler. Users can interact and trigger an event through this. After seeing the response in UI we will create our own parameters. This will help you to understand the underlying logic of event handlers and passing parameters through it.
Creating React Project:
Step 1: To create a react app you need to install react modules through npx command. “Npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.npx create-react-app project_name
Step 1: To create a react app you need to install react modules through npx command. “Npx” is used instead of “npm” because you will be needing this command in your app’s lifecycle only once.
npx create-react-app project_name
Step 2: After creating your react project move into the folder to perform different operations.cd project_name
Step 2: After creating your react project move into the folder to perform different operations.
cd project_name
Project Structure: After running the commands mentioned in the above steps, if you open the project in an editor you can see a similar project structure as shown below. The new components user makes or the code changes we will be performing will be done in the source folder. 
Example 1: In this example,  we will create an event handler that sends a Welcome message i.e. Alert whenever you click the button. 
App.js
import React from "react";class App extends React.Component {  call() {    alert("Welcome to Geeks for Geeeks!");  }  render() {    return (      <button onClick={this.call}>Click the button!</button>    );  }}  export default App;
Step to run the application: Open the terminal and type the following command. 
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.
Example 2: In this example, we will use the arrow function to create a new function that calls the function call with the right parameter. Passing the event object of react as the second argument. If you want to pass a parameter to the click event handler you need to make use of the arrow function or bind the function. If you pass the argument directly the onClick function would be called automatically even before pressing the button.
App.js
import React from "react";class App extends React.Component {  call(message,event) {    alert(message);  }  render() {    return (       //Creating a arrow function       <button onClick={(event)=> this.call("Your message",event)}>         Click the button!       </button>    );  }}export default App;
Step to run the application: Open the terminal and type the following command. 
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.
Example 3: In this example, we will use Bind Method that is also used to pass the parameters in functions of class-based components.
App.js
import React from "react";class App extends React.Component {  call(message) {    alert(message);  }  render() {    return (      <button onClick= {this.call.bind(this,"Your message")}>        Click the button!      </button>    );  }}export default App;
Step to run the application: Open the terminal and type the following command. 
npm start
Output: Open your browser. It will by default open a tab with localhost running (http://localhost:3000/) and you can see the output shown in the image. Click on the button to see the welcome message.
Picked
React-Questions
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS useNavigate() Hook
How to install bootstrap in React.js ?
How to do crud operations in ReactJS ?
How to create a multi-page website using React.js ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React