In this article, We will learn what is events and how to handle events in reactJS and the Change page heading on click event in ReactJS.

What is an event?

On all built-in HTML elements, like div, h2, and buttons…we have full access to all these native DOM events which we can listen to. HTML button element is more specific form of an HTML element.

Every action that can be taken on a display trigger an event. For example, moving the cursor can be an event, clicking somewhere can be an event even scrolling can be an event as well. Some of the examples of events are a blur, click, copy, dblclick, etc.  For all of these events, there is a prop equivalent in react which can be added to the built-in HTML elements to listen to the events.

Change heading on click event in ReactJS

Create reactJS application that defines a heading and a button and when the user will click on the button the heading will be changed. To perform this task will use onClick() event in reactJS.

• Create a react project by running these below commands, To know more about creating react project, Read this article.

npx create-react-app my-app
cd my-app
npm start

• Go to the src folder of the react project and open App.js file in the code.

import React, { useState, useEffect } from "react";
const App = () => {

  return (
    <div>

    </div>
  );
}

export default App

• Declare a state of any particular data in useState() hook,

import React, { useState, useEffect } from "react";
const App = () => {
  const [heading, setHeading] = useState('This is Default Heading');
  return (
    <div>

    </div>
  );
}

export default App

• Use the heading variable in the JSX

import React, { useState, useEffect } from "react";
const App = () => {
  const [heading, setHeading] = useState('This is Default Heading');
  return (
    <div>
      <h1 className="text-6xl text-center"><span className="text-error">Title:</span> {heading}</h1>
    </div>
  );
}

export default App

Here, we have a state that has a default value This is Default Heading which we are showing in the browser,

• Create a button below it (in this button, we will add our event listener and trigger something through the event)

import React, { useState, useEffect } from "react";
const App = () => {
  const [heading, setHeading] = useState('This is Default Heading');
  return (
    <div>
      <h1 className="text-6xl text-center"><span className="text-error">Title:</span> {heading}</h1>
      <button className="btn my-8 block mx-auto">Change Title</button>
    </div>
  );
}

export default App

Now, on this button, we will add props. This prop is not a props that sets some values for this button. Instead, it starts with ‘on‘. Because react exposes all these default events as props which starts with on. For example, onClick(). Now what it does is, adds an event listener for a click event to this button. Now we just have to declare what should happen when a click occurs. Let’s say, we want to change the title when we will click on this button.

• Declare an onClick() event to this button

<button onClick={} className="btn my-8 block mx-auto">Change Title</button>

// handle click
  const handleHeadingChange = () => {
    setHeading('This heading is appearing after a click on the button')
  };

import React, { useState, useEffect } from "react";
const App = () => {
  const [heading, setHeading] = useState('This is Default Heading');

  // handle click
  const handleHeadingChange = () => {
    setHeading('This heading is appearing after a click on the button')
  };
  return (
    <div>
      <h1 className="text-6xl text-center"><span className="text-error">Title:</span> {heading}</h1>
      <button onClick={handleHeadingChange} className="btn my-8 block mx-auto">Change Title</button>
    </div>
  );
}

export default App