Skip to content

Courses
Tutorials
Practice
Contests

React Tutorial
React Exercise
React Basic Concepts
React Components
React Props
React Hooks
React Router
React Advanced
React Examples
React Interview Questions
React Projects
Next.js Tutorial
React Bootstrap
React Material UI
React Ant Design
React Desktop
React Rebass
React Blueprint
JavaScript
Web Technology

React onCopy Event

React onClick Event

Last Updated : 29 Nov, 2024

Comments

Improve

Suggest changes

Like Article

Like

Report

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

React onCopy Event

A

ashishbhardwaj18

Improve

Article Tags :

Web Technologies
ReactJS
React Events

Similar Reads

React onDoubleClick Event

The onDoubleClick event in React is a native DOM event that triggers when the user double-clicks on an element, typically using the left mouse button. This event is part of a group of mouse events that React handles, including onClick, onMouseDown, onMouseUp, and others. onDoubleClick occurs when a

React onCut Event

React onCut Clipboard event is an event handler event, which detects the cut process in the browser. When the user starts cutting data through the shortcut key (CTRL + X) or the cut button present in the menu, this even automatically fires, and the function passed to it will call itself automaticall

React onScroll Event

React onScroll helps to listen for scroll interactions within specific elements and trigger actions accordingly. It triggers whenever the scrolling position changes within the specified element. It is useful when implementing infinite scrolling, parallax effects, lazy loading, or dynamic UI changes.

React onBlur Event

In React, handling user interactions efficiently is important for building responsive and dynamic applications. One of the commonly used events for managing focus behaviour is the onBlur event. This event is important for tracking when a user moves the focus away from an element, such as an input fi

React onCopy Event

React onCopy Clipboard event is an event handler which detects the copy process in the browser using JavaScript. When the user starts copying data through the shortcut key (CTRL + C) or the copy button present in the menu, this even automatically fires, and the function passed to it will call itself

React onKeyUp Event

React onKeyUp is an event listener that is used to detect the key release event in a browser using JavaScript. This event occurs once after the key is pressed and released. It is similar to the HTML DOM onkeyup event but uses the camelCase convention in React. Syntax:<input onKeyUp={keyUpFunction

React onInput Event

React onInput is an event handler that triggers then there is any change in the input field. It is fired immediately when the user is changing input. It is one of the form events that updates when the input field is modified. It is similar to the HTML DOM oninput event but uses the camelCase convent

React onFocus event

The onFocus event in React is triggered when an element receives focus, meaning it becomes the active element that can accept user input. This event is commonly used to execute functions or perform actions when an element gains focus. It is similar to the HTML DOM onfocus event but uses the camelCas

React onChange Event

React onChange is an event handler that triggers when there is any change in the input field. This event captures the changes in an Input Field and executes the handler function. It is fired when the input field is modified and loses focus. It is one of the form events that updates when the input fi

React onSubmit Event

The onSubmit event in React is an event handler that is triggered when a form is submitted. It allows you to handle form submissions and allows you to control what happens when a user submits a form, such as form validation, preventing the default submission behaviour, and executing custom logic lik

Corporate & Communications Address:

A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)

Registered Address:

K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305

Advertise with us

Company
About Us
Legal
Privacy Policy
In Media
Contact Us
Advertise with us
GFG Corporate Solution
Placement Training Program

Languages
Python
Java
C++
PHP
GoLang
SQL
R Language
Android Tutorial
Tutorials Archive

DSA
Data Structures
Algorithms
DSA for Beginners
Basic DSA Problems
DSA Roadmap
Top 100 DSA Interview Problems
DSA Roadmap by Sandeep Jain
All Cheat Sheets

Data Science & ML
Data Science With Python
Data Science For Beginner
Machine Learning
ML Maths
Data Visualisation
Pandas
NumPy
NLP
Deep Learning

Web Technologies
HTML
CSS
JavaScript
TypeScript
ReactJS
NextJS
Bootstrap
Web Design

Python Tutorial
Python Programming Examples
Python Projects
Python Tkinter
Python Web Scraping
OpenCV Tutorial
Python Interview Question
Django

Computer Science
Operating Systems
Computer Network
Database Management System
Software Engineering
Digital Logic Design
Engineering Maths
Software Development
Software Testing

DevOps
Git
Linux
AWS
Docker
Kubernetes
Azure
GCP
DevOps Roadmap

System Design
High Level Design
Low Level Design
UML Diagrams
Interview Guide
Design Patterns
OOAD
System Design Bootcamp
Interview Questions

Inteview Preparation
Competitive Programming
Top DS or Algo for CP
Company-Wise Recruitment Process
Company-Wise Preparation
Aptitude Preparation
Puzzles

School Subjects
Mathematics
Physics
Chemistry
Biology
Social Science
English Grammar
Commerce
World GK

GeeksforGeeks Videos
DSA
Python
Java
C++
Web Development
Data Science
CS Subjects

@GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy

Improvement

Suggest Changes

Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.

geeksforgeeks-suggest-icon

Create Improvement

Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.

geeksforgeeks-improvement-icon

Suggest Changes

min 4 words, max Words Limit:1000

Thank You!

Your suggestions are valuable to us.

What kind of Experience do you want to share?

Interview Experiences

Admission Experiences

Career Journeys

Work Experiences

Campus Experiences

Competitive Exam Experiences