How to bind an event handler in JSX callback ?

ReactJS is a JavaScript library focused on building user interfaces. JSX callbacks in React are used to associate event handlers with elements in JSX code. Event handlers, like those for button clicks or form submissions, are functions triggered by events. In React, event handlers are bound to elements in JSX using the on syntax (e.g., onClick for click events), and a callback function is assigned to handle the event. This callback function is typically defined using bind() or the arrow function.

Syntax:

<element onEvent={this.eventHandler} />

We will see how to bind the event handler in JSX using the below examples:

Steps to Create the React Application And Installing Module:

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

npx create-react-app "foldername"

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

cd foldername

Step 3: After setting up react environment on your system, we can start by creating an App.js file and create a directory by the name of components in which we will write our desired function.

Project Structure:

How to bind an event handler in JSX callback?

The updated dependencies in package.json file will look like:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
  }

Approach 1: Binding a click event handler to a button in JSX:

In this approach, we have defined a handleClick method that will log a message to the console when the button is clicked. We have then passed the handleClick method as a callback to the onClick event of the button.

Example: Below is the implementation of the above mentioned approach.

Javascript

import React from "react";
class App extends React.Component {
    handleClick() {
        console.log("Button clicked");
    }

    render() {
        return (
            <div>
                <h1
                    style={{
                        color: "green",
                        fontSize: "3rem",
                        fontWeight: "bold",
                    }}
                >
                    GeekforGeeks
                </h1>
                <button
                    style={{
                        fontSize: "3rem",
                        fontWeight: "bold",
                        border: "2px solid black",
                    }}
                    onClick={this.handleClick}
                >
                    Click Me!
                </button>
            </div>
        );
    }
}
export default App;

Step to Run Application: Open the terminal and type the following command.

npm start

Output:

How to bind an event handler in JSX callback?

Approach 2: Using constructor and bind method.

This React class component named “App” includes a button with the label “Click Me!” and a header displaying “GeekforGeeks.” The button is linked to a “handleClick” method, which logs “Button clicked” to the console when the button is clicked.

Example: This example implements the above mentioned approach.

Javascript

import React from "react";
class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        console.log("Button clicked");
    }

    render() {
        return (
            <div>
                <h1
                    style={{
                        color: "green",
                        fontSize: "3rem",
                        fontWeight: "bold",
                    }}
                >
                    GeekforGeeks
                </h1>
                <button
                    style={{
                        fontSize: "3rem",
                        fontWeight: "bold",
                        border: "2px solid black",
                    }}
                    onClick={this.handleClick}
                >
                    Click Me!
                </button>
            </div>
        );
    }
}
export default App;

Step to Run Application: Open the terminal and type the following command.

npm start

Output:

How to bind an event handler in JSX callback?

Approach 3: Using arrow function:

The React class component “App” features a button labeled “Click Me!” linked to a handleClick method, logging “Button clicked” when clicked. The component also displays a styled header with the text “GeekforGeeks.”

Example: This example implements the above-mentioned approach

Javascript

import React from "react";
class App extends React.Component {
    handleClick = () => {
        console.log("Button clicked");
    };
    render() {
        return (
            <div>
                <h1
                    style={{
                        color: "green",
                        fontSize: "3rem",
                        fontWeight: "bold",
                    }}
                >
                    GeekforGeeks
                </h1>
                <button
                    style={{
                        fontSize: "3rem",
                        fontWeight: "bold",
                        border: "2px solid black",
                    }}
                    onClick={this.handleClick}
                >
                    Click Me!
                </button>
            </div>
        );
    }
}
export default App;

Step to Run Application: Open the terminal and type the following command.

npm start

Output:

How to bind an event handler in JSX callback?