Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Phase 5 · 4 / 9Events in React
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Events in React
01 / 09Overview

Events in React

You'll learn to run your own code when someone taps a button, with event handlers like onClick.

Why it mattersEvery tap, click and key press in a React app reaches your code through an event handler.
about 60 min·needs: State with useState, Events and handlers
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Responding to eventsreact.dev · official docs · 20 min · English
MMamun's noteRead "Adding event handlers" and "Passing event handlers as props", and look closely at the table of passing versus calling. Skip "Event propagation" for now.
Video
Full React tutorial #7: click eventsYouTube · Net Ninja · 7 min · English
MMamun's noteWatch all seven minutes. He passes handleClick without brackets, then wraps a call that needs a value in an arrow function. That is this topic in one short video.
03 / 09

Explanation

You want a scorer's app: tap "Four" and the score goes up by 4. A tap is an event. The function that runs when it happens is an event handler.

In React you give the handler to the element as a prop. Event names are written in camelCase: onClick, onChange, onSubmit.

function handleClick() {
  setRuns(runs + 1);
}
 
<button onClick={handleClick}>+1</button>

You pass the function. You don't call it. onClick={handleClick} means "here is the function; run it later, when someone taps". React keeps it and calls it on each tap.

People often write onClick={handleClick()}. The () runs the function right now, while React is drawing the screen, and gives onClick its result instead. If that function sets state, React renders again, runs it again, and stops with a "Too many re-renders" error.

When the handler needs a value, wrap it in a small arrow function:

<button onClick={() => addRuns(4)}>Four</button>

Now the arrow is what React keeps. On a tap, the arrow runs, and it calls addRuns(4).

When you read JSX, check every on...={ }. Is there a function name or an arrow inside? Good. Is there a call with () and no arrow? That runs too early.

Words to recognise
event handleronClickonClick={handleClick}() =>
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx4 notes
1import { useState } from "react";
2
3export default function RunButtons() {
4 const [runs, setRuns] = useState(0);
5
function addRuns(amount) {
Mentor note · line 6
The event handler. It takes how many runs to add, so one function serves every button.
setRuns(runs + amount);
8 }
9
10 return (
11 <div>
12 <p>Runs: {runs}</p>
<button onClick={() => addRuns(1)}>+1</button>
<button onClick={() => addRuns(4)}>Four</button>
15 </div>
16 );
17}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Wallet() {
2  const [balance, setBalance] = useState(500);
3 
4  return (
5    <div>
6      <p>{balance} Tk</p>
7      <button onClick={setBalance(balance - 100)}>Send 100</button>
8    </div>
9  );
10}
What happens when this component first appears?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3When does handleClick run in <button onClick={handleClick}>?
  2. 2 / 3How do you run addRuns(6) when a button is tapped?
  3. 3 / 3How is the click event written in JSX?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Events in React?

09 / 09

Done

You can now
Read onClick={...} and say when the code runs, and spot a handler that runs too early.
Next: Showing things conditionally Back to Phase 5
On this page
  1. 01Events in React
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read
Mamun Labs LearnFound a mistake on this page? Tell Mamun.
Mamun Labs Learn
JourneyGlossary
esc
  • Try “map”, “flexbox” or “state”.
Log in
Start learning
Log in to save your progress. Everything here works without an account.Log in to save progressLog in
Phase 5React
9 topics · 5–6 wks
  1. 1Components and JSX
  2. 2Props
  3. 3State with useState
  4. 4Events in React
  5. 5Showing things conditionally
  6. 6Lists and keys
  7. 7Forms and inputs
  8. 8useEffect
  9. 9Fetching data in React
JourneyPhase 5Events in React
01 / 09Overview

Events in React

You'll learn to run your own code when someone taps a button, with event handlers like onClick.

Why it mattersEvery tap, click and key press in a React app reaches your code through an event handler.
about 60 min·needs: State with useState, Events and handlers
02 / 09

Watch & read

Start with the required ones. The others are there when you need them.

Docs
Responding to eventsreact.dev · official docs · 20 min · English
MMamun's noteRead "Adding event handlers" and "Passing event handlers as props", and look closely at the table of passing versus calling. Skip "Event propagation" for now.
Video
Full React tutorial #7: click eventsYouTube · Net Ninja · 7 min · English
MMamun's noteWatch all seven minutes. He passes handleClick without brackets, then wraps a call that needs a value in an arrow function. That is this topic in one short video.
03 / 09

Explanation

You want a scorer's app: tap "Four" and the score goes up by 4. A tap is an event. The function that runs when it happens is an event handler.

In React you give the handler to the element as a prop. Event names are written in camelCase: onClick, onChange, onSubmit.

function handleClick() {
  setRuns(runs + 1);
}
 
<button onClick={handleClick}>+1</button>

You pass the function. You don't call it. onClick={handleClick} means "here is the function; run it later, when someone taps". React keeps it and calls it on each tap.

People often write onClick={handleClick()}. The () runs the function right now, while React is drawing the screen, and gives onClick its result instead. If that function sets state, React renders again, runs it again, and stops with a "Too many re-renders" error.

When the handler needs a value, wrap it in a small arrow function:

<button onClick={() => addRuns(4)}>Four</button>

Now the arrow is what React keeps. On a tap, the arrow runs, and it calls addRuns(4).

When you read JSX, check every on...={ }. Is there a function name or an arrow inside? Good. Is there a call with () and no arrow? That runs too early.

Words to recognise
event handleronClickonClick={handleClick}() =>
04 / 09

Code tour

Click a line number with a ring to read the note for that line.

App.jsx4 notes
1import { useState } from "react";
2
3export default function RunButtons() {
4 const [runs, setRuns] = useState(0);
5
function addRuns(amount) {
Mentor note · line 6
The event handler. It takes how many runs to add, so one function serves every button.
setRuns(runs + amount);
8 }
9
10 return (
11 <div>
12 <p>Runs: {runs}</p>
<button onClick={() => addRuns(1)}>+1</button>
<button onClick={() => addRuns(4)}>Four</button>
15 </div>
16 );
17}
05 / 09

Practice

Short drills. Take your time and read the code before you answer.

DrillPredict1 / 1
1function Wallet() {
2  const [balance, setBalance] = useState(500);
3 
4  return (
5    <div>
6      <p>{balance} Tk</p>
7      <button onClick={setBalance(balance - 100)}>Send 100</button>
8    </div>
9  );
10}
What happens when this component first appears?
06 / 09

Quick check

3 questions. Each one explains itself after you answer.

  1. 1 / 3When does handleClick run in <button onClick={handleClick}>?
  2. 2 / 3How do you run addRuns(6) when a button is tapped?
  3. 3 / 3How is the click event written in JSX?
07 / 09

Explain it back

Only you can see this. Log in to keep it.0 words
08 / 09

How confident are you with Events in React?

09 / 09

Done

You can now
Read onClick={...} and say when the code runs, and spot a handler that runs too early.
Next: Showing things conditionally Back to Phase 5
On this page
  1. 01Events in React
  2. 02Watch & read
  3. 03Explanation
  4. 04Code tour
  5. 05Practice
  6. 06Quick check
  7. 07Explain it back
  8. 08Confidence
  9. 09Done
Up next · 02 / 09Watch & read

You want a scorer's app: tap "Four" and the score goes up by 4. A tap is an event. The function that runs when it happens is an event handler.

In React you give the handler to the element as a prop. Event names are written in camelCase: onClick, onChange, onSubmit.

function handleClick() {
  setRuns(runs + 1);
}
 
<button onClick={handleClick}>+1</button>

You pass the function. You don't call it. onClick={handleClick} means "here is the function; run it later, when someone taps". React keeps it and calls it on each tap.

People often write onClick={handleClick()}. The () runs the function right now, while React is drawing the screen, and gives onClick its result instead. If that function sets state, React renders again, runs it again, and stops with a "Too many re-renders" error.

When the handler needs a value, wrap it in a small arrow function:

<button onClick={() => addRuns(4)}>Four</button>

Now the arrow is what React keeps. On a tap, the arrow runs, and it calls addRuns(4).

When you read JSX, check every on...={ }. Is there a function name or an arrow inside? Good. Is there a call with () and no arrow? That runs too early.

Words to recognise
event handleronClickonClick={handleClick}() =>

You want a scorer's app: tap "Four" and the score goes up by 4. A tap is an event. The function that runs when it happens is an event handler.

In React you give the handler to the element as a prop. Event names are written in camelCase: onClick, onChange, onSubmit.

function handleClick() {
  setRuns(runs + 1);
}
 
<button onClick={handleClick}>+1</button>

You pass the function. You don't call it. onClick={handleClick} means "here is the function; run it later, when someone taps". React keeps it and calls it on each tap.

People often write onClick={handleClick()}. The () runs the function right now, while React is drawing the screen, and gives onClick its result instead. If that function sets state, React renders again, runs it again, and stops with a "Too many re-renders" error.

When the handler needs a value, wrap it in a small arrow function:

<button onClick={() => addRuns(4)}>Four</button>

Now the arrow is what React keeps. On a tap, the arrow runs, and it calls addRuns(4).

When you read JSX, check every on...={ }. Is there a function name or an arrow inside? Good. Is there a call with () and no arrow? That runs too early.

Words to recognise
event handleronClickonClick={handleClick}() =>