Most of the behavior in an application revolves around events. User enters a value in the registration form? Event💁‍♀️. User hits the submit button? Another Event💁‍♀️. Events are triggered in a number of ways and we build applications to listen for them in order to do something else in response.

The easiest way to learn about events in React is to actually use them🤫. And that's exactly what we're going to do! 😉

In this article, we will cover information about event handling with complete examples.

Events in React 🍁

Event handling or management is one of the important features in a web application. It enables the user to interact with the application😯. React supports all the events available in a web application. React event handling is almost identical to DOM events, just a slight change in the cable.

But before starting this article💁‍♀️ you should have some basic knowledge of React like(They are all my blogs👉) what is React, what is JSX. What is the component, React State and React props in React and install React in your computer.

Events Handling in React Js🤔

An event is an action that can be triggered as a result of a user action or a system-generated event. For example, a mouse click, loading a web page, pressing a key, resizing a window, and other interactions are called Events.

The actions to which javascript can respond are called events. Handling events with react is very similar to handling events in DOM elements.

Naming Events in React 💥

Handling events with react is very similar to handling events in DOM elements, although there are some syntactic differences.

• ☝️ React events are written in camelCase.
• ✌️ A function is passed as the event handler rather than string.

The way to write events in html / DOM is below:

<button onclick=”handleClick()”>click me</button>

onclick is written in lower case in html as shown above and what action to take when this onclick event triggers is taken care of by handleClick.

In React events are named using camel case and you pass a function as an event handler as shown below🙂:

• In a functional component, the event is written like below👇:

<button onClick={handleClick}>click me</button>

• In class component, theevent is written like below👇:

  <button onClick={this.handleClick}>click me</button>
  

In React we cannot return false to prevent default behavior We must explicitly call the preventDefault event to prevent the default behavior.

For example:

In plain HTML, to prevent the default link behavior of opening a new page, we can write

<a href="#" onclick="console.log ( 'You had clicked a Link.'); return false">
 Click_Me
 </a>

In React we can write it like this.

function ActionLink() {

 function handleClick(e) {
 e.preventDefault();  
console.log('You had clicked a Link.');
}
 return (
<a href="#" onClick= {handleclick}> Click_Me </a>
);

 }

Adding Events in React Js👍

HTML:

<button onclick="shoot()">Take the Shot!</button>

React:

<button onClick={shoot}>Take the Shot!</button>

Example:

Place the Shoot function inside the football component

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

function Football() {
  const shoot = () => {
    alert("Great Shot!");
  }

  return (
    <button onClick={shoot}>Take the shot!</button>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);

How to use React events 🧠

To use Events in Reactfirst, go to App.js in the created React web app and copy and paste the following code👇:

import "./App.css";
function App() {
  const handleOnSubmit = (e) => {
    e.preventDefault();
    console.warn("You clicked on submit function")
  };
  return (
    <>
      <h1>This is React WebApp </h1>
      <form action="">
        <button type="submit" onClick={handleOnSubmit}>
          submit
        </button>
      </form>

    </>
  );
}

export default App;

Make the following code changes in your default App.js.

• Here we have created an arrow function name as handleOnSubmit.

• In the function we do console.warn("You clicked submit function")

• Create a button and add event onClick={handleOnSubmit}

• Enter the following command to run the application:npm start

Output will show something like this:🙂

conclusion🙆‍♀️

In this article "Events Handling in React Js", we understood that like HTML DOM events, React can perform actions based on user events and React has events similar to HTML. For example: click mouseover or change etc😉.

I hope this article helps you to understand what events are in React and how to use it.

Thanks for reading🤗!!!!

Hare Krishna 🙏🙏