React onClick Event

Last Updated : 29 Nov, 2024

The onClick event in React is used for handling a function when an element, such as a button, div, or any clickable element, is clicked.

Syntax

onClick={handleClick}

Parameter

The callback function handleClick which is invoked when onClick event is triggered

Return Type

It is an event object containing information about the methods and is triggered when the mouse is clicked.

Example 1: In this React code, the button text and heading message toggle on click using state changes.

CSS

/* Write CSS Here */

.App {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

body {
    background-color: antiquewhite;
}

.App>h2 {
    text-align: center;
}

.App>button {
    width: 8rem;
    font-size: larger;
    padding: 2vmax auto;
    height: 1.8rem;
    color: white;
    background-color: rgb(34, 34, 33);
    border-radius: 10px;
}

button:hover {
    background-color: rgb(80, 80, 78);

}

JavaScript

// App.js

import "./App.css"

import React, {useState} from "react";

const App = () => {
    const [num, setNum] = useState(false);
    const [btn, setBtn] = useState(false);
    const handleClick = () => {
        setNum(!num);
        setBtn(!btn);
    };

    return (
        <div className="App">
            <h2> {
                num ?
                    "onClick event performed" :
                    "onClick event not performed"
            }
            </h2>
            <button onClick={handleClick}>
                {btn ? "clicked" : "onClick"}
            </button>
        </div>
    );
};

export default App;

Output:

React onClickevent Example GIF — React onClick Event

Example 2: In this React code, each time the button is clicked, it increments a number by 1 and displays the updated value on the screen.

CSS

/* Write CSS Here */

.App {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body {
    background-color: antiquewhite;
}

.App>h2 {
    text-align: center;
}

.App>button {
    width: 8rem;
    font-size: larger;
    padding: 2vmax auto;
    height: 1.8rem;
    color: white;
    background-color: rgb(34, 34, 33);
    border-radius: 10px;
}

button:hover {
    background-color: rgb(80, 80, 78);

}

JavaScript

// App.js

import "./App.css"

import React, {useState} from "react";

const App = () => {
    const [num, setNum] = useState(0);
    const handleClick = () => {
        setNum(num + 1);
    };

    return (
        <div className="App">
            <h2> {num}</h2>
            <button onClick={handleClick}>
                Add one
            </button>
        </div>
    );
};

export default App;

Output:

React onClick event eample 2 GIF — React onClick Event to Create Counter

Company Preparation

ashishbhardwaj18

Improve

Article Tags :

React onClick Event

Similar Reads

Interview Preparation

Practice @Geeksforgeeks

Data Structures

Algorithms

Programming Languages

Web Technologies

Computer Science Subjects

Data Science & ML

Tutorial Library

GATE CS

Thank You!

What kind of Experience do you want to share?