4/2/25, 10:42 a.m.

React Events

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

React Events
❮ Previous Next ❯

Just like HTML DOM events, React can perform actions based on user events.

React has the same events as HTML: click, change, mouseover etc.

Adding Events
React events are written in camelCase syntax:

onClick instead of onclick .

React event handlers are written inside curly braces:

onClick={shoot} instead of onclick="shoot()" .

React:

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

HTML:

https://www.w3schools.com/REACT/react_events.asp 1/8
4/2/25, 10:42 a.m. React Events

<buttonTutorials
onclick="shoot()">Take
 Exercises  the Shot!</button>
Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

Example:
Put the shoot function inside the Football component:

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 />);

Run Example »

Get Certified!
school
w3 s
5
CE

02

TI 2
Complete the React modules, do the exercises, take the exam and become
R

FI .
ED

w3schools certified!!

$95 ENROLL

Passing Arguments
https://www.w3schools.com/REACT/react_events.asp 2/8
4/2/25, 10:42 a.m. React Events

To pass an argument to an event handler, use an arrow function.

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
Example:
Send "Goal!" as a parameter to the shoot function, using arrow function:

function Football() {
const shoot = (a) => {
alert(a);
}

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

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Football />);

Run Example »

React Event Object

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

In our example the event is the "click" event.

Example:
Arrow Function: Sending the event object manually:

function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,

https://www.w3schools.com/REACT/react_events.asp 3/8
4/2/25, 10:42 a.m. React Events

in this case the 'click' event

 Tutorials 
*/ Exercises  Services   Sign Up Log in
}
HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<Football />);

Run Example »

This will come in handy when we look at Form in a later chapter.

?
Exercise
In React, which is a correct way of adding a mouseover event to trigger a
function called 'run_now'?

<div onmouseover='run_now()'>Lorum Ipsum</div>

<div onMouseover='run_now'>Lorum Ipsum</div>

<div onMouseover={run_now}>Lorum Ipsum</div>

Submit Answer »

❮ Previous Next ❯

https://www.w3schools.com/REACT/react_events.asp 4/8
4/2/25, 10:42 a.m. React Events

Track your Services

progress - it's free!
 Tutorials  Exercises    Sign Up
Sign Up Log in
Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

COLOR PICKER



https://www.w3schools.com/REACT/react_events.asp 5/8
4/2/25, 10:42 a.m. React Events

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

https://www.w3schools.com/REACT/react_events.asp 6/8
4/2/25, 10:42 a.m. React Events

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C

 PLUS SPACES GET CERTIFIED

FOR TEACHERS FOR BUSINESS CONTACT US

Top Tutorials Top References

HTML Tutorial HTML Reference
CSS Tutorial CSS Reference
JavaScript Tutorial JavaScript Reference
How To Tutorial SQL Reference
SQL Tutorial Python Reference
Python Tutorial W3.CSS Reference
W3.CSS Tutorial Bootstrap Reference
Bootstrap Tutorial PHP Reference
PHP Tutorial HTML Colors
Java Tutorial Java Reference
C++ Tutorial Angular Reference
jQuery Tutorial jQuery Reference

Top Examples Get Certified

HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
https://www.w3schools.com/REACT/react_events.asp 7/8
4/2/25, 10:42 a.m. React Events

 Tutorials  Exercises  Services   Sign Up Log in

HTML
 CSS  JAVASCRIPT
   SQL PYTHON JAVA PHP HOW TO W3.CSS C

FORUM ABOUT ACADEMY

W3Schools is optimized for learning and training. Examples might be simplified to
improve reading and learning.
Tutorials, references, and examples are constantly reviewed to avoid errors, but we
cannot warrant full correctness
of all content. While using W3Schools, you agree to have read and accepted our terms of
use, cookie and privacy policy.

Copyright 1999-2025 by Refsnes Data. All Rights Reserved. W3Schools is Powered by

W3.CSS.

https://www.w3schools.com/REACT/react_events.asp 8/8