ReactJS | Handling Events with Example

Hello React Friends,

I will explain event handling in ReactJS in detail in this tutorial guide.

Event handling allows users to interact with a web page and perform actions when events like click or hovering occur. Following are some events that are triggered by the system:

• Clicking an element
• Hovering an element
• Scrolling page
• Loading a webpage
• Image loading
• Submitting a form

Event Handling in ReactJS

React event handling is similar to event handling on DOM elements. There are some syntax differences in event handling for React and HTML.

Difference Between Html And React Event Handling

React events are written in camelcase instead of lowercase.

onClick instead of onclick.

React event handlers are passed as a function instead of a string. They are written inside curly braces.

onClick={fireme} instead of onClick=“fireme()”.

Event handling example in React:

<button onClick={fireme}>Click to fire me</button>

Event handling example in HTML:

<button onclick=“fireme()“>Click to fire me</button>

Example:

import React from 'react';
import ReactDOM from 'react-dom/client';

function MyFireArea()
{
    const fireme = () =>
    {
        alert(“I am Burn!”);
    }
    return (
        <button onClick={fireme}>Click to fire me</button>
    );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyFireArea />);

Passing Arguments to Event Handlers

Pass an argument to an event handler using an arrow function.

Example:

function MyFireArea()
{
    const fireme = (myArg) =>
    {
        alert(myArg);
    }
    return (
        <button onClick={() => fireme(“I am Burned”)}>Click to fire me</button>
    );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyFireArea />);

React Event Object

Event handlers have access to the react event that triggered the function.

Example:

function MyFireArea()
{
    const fireme = (myArg, b) =>
    {
        alert(b.type);
        /*
        'b' represents the React event that triggered the function,
        in this case the 'click' event
        */
    }
    return (
        <button onClick={(event) => fireme("I am Burned", event)}>Take the shot!</button>
    );
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<MyFireArea />);

Conclusion:

Event handling in React is the same as handling events in HTML. There are just some differences in syntax between the two. I hope the above example helped you to understand event handling in ReactJS.

Find more blogs on ReactJS – Click here!

Share the tutorial with your friends and stay in touch with us.

Happy Coding!