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 [Link] 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:
[Link] 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 [Link] 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 = [Link]([Link]('root'));
[Link](<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
[Link] 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 [Link] 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 = [Link]([Link]('root'));
[Link](<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([Link]);
/*
'b' represents the React event that triggered the function,
[Link] 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 [Link] C
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
const root = [Link]([Link]('root'));
[Link](<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 ❯
[Link] 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 [Link] C
COLOR PICKER
[Link] 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 [Link] C
[Link] 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 [Link] 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 [Link] Reference
[Link] 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
[Link] Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate
[Link] 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 [Link] 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
[Link].
[Link] 8/8
