// B3.1 · ~30 min · Beginner
After this lesson you write event handlers, pass them down as props, predict the order in which nested handlers run, and stop propagation or a form reload.
Lesson 1 of 6 in B3 Adding interactivity
You will be able to
Warm-up · Activity 1 of 7
let calls = 0;
function Badge({ label }) {
calls = calls + 1;
return <span>{label}</span>;
}
function Badges() {
return (
<p>
<Badge label="new" />
<Badge label="sale" />
</p>
);
}Predict · Activity 2 of 7
function Toolbar() {
return (
<div onClick={() => console.log('toolbar')}>
<button onClick={() => console.log('play')}>Play</button>
</div>
);
}Practice · Activity 3 of 7
function Toolbar() {
return (
<div onClick={() => console.log('toolbar')}>
<button
onClick={e => {
e.____();
console.log('play');
}}
>
Play
</button>
</div>
);
}Practice · Activity 4 of 7
Practice · Activity 5 of 7
function LogButton({ message, children }) {
return (
<button onClick={() => console.log(message)}>
{children}
</button>
);
}
function Actions() {
return (
<div>
<LogButton message="Saving!">Save</LogButton>
<LogButton message="Sharing!">Share</LogButton>
</div>
);
}Brain teaser · Activity 6 of 7
function Button({ onClick, children }) {
return (
<button
onClick={e => {
e.stopPropagation();
onClick();
}}
>
{children}
</button>
);
}
function Toolbar({ onPlayMovie, onUploadImage }) {
return (
<div
className="toolbar"
onClickCapture={() => console.log('capture: toolbar')}
onClick={() => console.log('bubble: toolbar')}
>
<button onClick={onPlayMovie}>Play Movie</button>
<Button onClick={onUploadImage}>Upload Image</Button>
</div>
);
}
function App() {
return (
<Toolbar
onPlayMovie={() => console.log('Playing!')}
onUploadImage={() => console.log('Uploading!')}
/>
);
}Apply · Activity 7 of 7
Check your work against this list
Read the worked example, then write the exercises. Your code runs in your browser or on your computer and is never uploaded.
Worked example
App passes two handlers to Toolbar as onPlayMovie and onUploadImage, named after what they do. Toolbar hands onPlayMovie to a plain <button>, and onUploadImage to Button, which calls e.stopPropagation() and then the handler. The toolbar <div> has an onClickCapture and an onClick. A run only renders the page, so the output is the HTML; handlers do not show up in it. In the browser the page stays live: click the buttons and their lines are added to the output.
main.jsx
function Button({ onClick, children }) {
return (
<button
onClick={e => {
e.stopPropagation();
onClick();
}}
>
{children}
</button>
);
}
function Toolbar({ onPlayMovie, onUploadImage }) {
return (
<div
className="toolbar"
onClickCapture={() => console.log('capture: toolbar')}
onClick={() => console.log('bubble: toolbar')}
>
<button onClick={onPlayMovie}>Play Movie</button>
<Button onClick={onUploadImage}>Upload Image</Button>
</div>
);
}
export default function App() {
return (
<Toolbar
onPlayMovie={() => console.log('Playing!')}
onUploadImage={() => console.log('Uploading!')}
/>
);
}
styles.css
.toolbar {
display: flex;
gap: 8px;
padding: 12px;
background: #eef;
border-radius: 8px;
}
Run it with
npm run devOutput
<!-- #root -->
<div id="root"><div class="toolbar"><button>Play Movie</button><button>Upload Image</button></div></div>Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads React and the compiler that turns JSX into JavaScript (up to 2 MB) and keeps them cached. Your components run in your browser and stay on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Exercise 1 of 2
The toolbar shows a status line. Clicking Play Movie should show Playing!, and Upload Image should show Uploading!. Run it and click: the status always ends up as You clicked the toolbar, because the click bubbles up to the <div> after the button's handler. Change Button so that it stops propagation and then calls onClick. A click on the toolbar itself, such as on the status line, must still show You clicked the toolbar.
Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads React and the compiler that turns JSX into JavaScript (up to 2 MB) and keeps them cached. Your components run in your browser and stay on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
Button needs its own handler: onClick={e => { … }}. It receives the event object e.
Inside it, call e.stopPropagation(); first, then onClick();.
Leave the toolbar's onClick as it is: clicks on the toolbar itself should still reach it.
One way to solve it. Yours can look different and still pass the checks.
import { useState } from 'react';
function Button({ onClick, children }) {
return (
<button
onClick={e => {
e.stopPropagation();
onClick();
}}
>
{children}
</button>
);
}
export default function Toolbar() {
const [message, setMessage] = useState('Nothing clicked yet');
return (
<div
role="toolbar"
aria-label="Player"
className="toolbar"
onClick={() => setMessage('You clicked the toolbar')}
>
<Button onClick={() => setMessage('Playing!')}>Play Movie</Button>
<Button onClick={() => setMessage('Uploading!')}>Upload Image</Button>
<p role="status">{message}</p>
</div>
);
}
Install React 19.3 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.jsx
import { useState } from 'react';
function Button({ onClick, children }) {
// TODO: stop the click from reaching the toolbar, then call onClick.
return <button onClick={onClick}>{children}</button>;
}
export default function Toolbar() {
const [message, setMessage] = useState('Nothing clicked yet');
return (
<div
role="toolbar"
aria-label="Player"
className="toolbar"
onClick={() => setMessage('You clicked the toolbar')}
>
<Button onClick={() => setMessage('Playing!')}>Play Movie</Button>
<Button onClick={() => setMessage('Uploading!')}>Upload Image</Button>
<p role="status">{message}</p>
</div>
);
}
main.test.jsx
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Toolbar from './main.jsx';
const status = () => screen.getByRole('status').textContent;
test('Play Movie shows Playing!', async () => {
const user = userEvent.setup();
render(<Toolbar />);
await user.click(screen.getByRole('button', {name: 'Play Movie'}));
assert.equal(status(), 'Playing!', 'after a click on Play Movie the status reads ' + JSON.stringify(status()));
});
test('Upload Image shows Uploading!', async () => {
const user = userEvent.setup();
render(<Toolbar />);
await user.click(screen.getByRole('button', {name: 'Upload Image'}));
assert.equal(status(), 'Uploading!', 'after a click on Upload Image the status reads ' + JSON.stringify(status()));
});
test('A click on the toolbar itself still reaches the toolbar', async () => {
const user = userEvent.setup();
render(<Toolbar />);
await user.click(screen.getByRole('status'));
assert.equal(status(), 'You clicked the toolbar', 'after a click on the status line it reads ' + JSON.stringify(status()));
});
styles.css
.toolbar {
display: flex;
gap: 8px;
padding: 12px;
background: #eef;
border-radius: 8px;
}
In a Vite React project (npm create vite@latest, template react), put main.jsx in src/ as App.jsx and start it with npm run dev. React renders it inside <StrictMode>, as here.
Run the program:
npm run devThere is no command for the checks on your computer yet. They are in main.test.jsx, written with node:test and React Testing Library.
Exercise 2 of 2
Signup has a name field and a Send button. Sending a form makes the browser load a new page by default. In jsdom, which the checks use, that prints Not implemented: HTMLFormElement's requestSubmit() method. Complete handleSubmit: call e.preventDefault() on the event, then store the typed name with setSent(name), so the status line shows Submitted: and the name.
Tab indents and Shift+Tab outdents. To leave the editor with the keyboard, press Esc, then Tab.
The first run downloads React and the compiler that turns JSX into JavaScript (up to 2 MB) and keeps them cached. Your components run in your browser and stay on your device.
Your page
Your page runs in an isolated frame. It has no access to this site, and its localStorage is kept in memory for this run only: the next run starts empty.
Run the program to see its page here.
handleSubmit already receives the event object as e.
The first line is e.preventDefault();. It cancels the browser's default, not propagation.
Then call setSent(name);: name holds what was typed, and sent is shown in the status line.
One way to solve it. Yours can look different and still pass the checks.
import { useState } from 'react';
export default function Signup() {
const [name, setName] = useState('');
const [sent, setSent] = useState('');
function handleSubmit(e) {
e.preventDefault();
setSent(name);
}
return (
<form aria-label="Sign up" onSubmit={handleSubmit}>
<label>
Name <input value={name} onChange={e => setName(e.target.value)} />
</label>
<button>Send</button>
<p role="status">{sent ? 'Submitted: ' + sent : 'Nothing sent yet'}</p>
</form>
);
}
Install React 19.3 or newer. Save these files in one folder, open a terminal in that folder, and run the commands below.
main.jsx
import { useState } from 'react';
export default function Signup() {
const [name, setName] = useState('');
const [sent, setSent] = useState('');
function handleSubmit(e) {
// TODO: stop the browser from loading a new page,
// then remember the name that was sent.
}
return (
<form aria-label="Sign up" onSubmit={handleSubmit}>
<label>
Name <input value={name} onChange={e => setName(e.target.value)} />
</label>
<button>Send</button>
<p role="status">{sent ? 'Submitted: ' + sent : 'Nothing sent yet'}</p>
</form>
);
}
main.test.jsx
import {test} from 'node:test';
import assert from 'node:assert/strict';
import {render, screen, fireEvent} from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Signup from './main.jsx';
const status = () => screen.getByRole('status').textContent;
test('Before sending, the status reads Nothing sent yet', () => {
render(<Signup />);
assert.equal(status(), 'Nothing sent yet', 'the status reads ' + JSON.stringify(status()));
});
test('Sending shows the typed name', async () => {
const user = userEvent.setup();
render(<Signup />);
await user.type(screen.getByRole('textbox', {name: 'Name'}), 'Ada');
await user.click(screen.getByRole('button', {name: 'Send'}));
assert.equal(status(), 'Submitted: Ada', 'after typing Ada and sending, the status reads ' + JSON.stringify(status()));
});
test('The submit handler prevents the default', () => {
render(<Signup />);
const notPrevented = fireEvent.submit(screen.getByRole('form', {name: 'Sign up'}));
assert.equal(notPrevented, false, 'the submit event was not prevented, so the browser would load a new page');
});
In a Vite React project (npm create vite@latest, template react), put main.jsx in src/ as App.jsx and start it with npm run dev. React renders it inside <StrictMode>, as here.
Run the program:
npm run devThere is no command for the checks on your computer yet. They are in main.test.jsx, written with node:test and React Testing Library.
export default function Save() {
function handleClick() {
console.log('saved');
}
return <button onClick="handleClick()">Save</button>;
}
What React prints
Expected `onClick` listener to be a function, instead got a value of `string` type.Why, and the fix
In HTML, onclick holds code as text. In React, onClick takes a function, so pass the function in braces: onClick={handleClick}. React warns as soon as the button renders, and the string is never run.
export default function Signup() {
function handleSubmit(e) {
e.preventDefault();
console.log('sent');
}
return (
<form onSubmit={handleSubmit()}>
<input />
<button>Send</button>
</form>
);
}
What React prints
TypeError: Cannot read properties of undefined (reading 'preventDefault')Why, and the fix
The parentheses call handleSubmit while Signup renders, without an event, so e is undefined and the run stops with Uncaught TypeError (Chrome and Node wording; Firefox and Safari word it differently). Pass the function, onSubmit={handleSubmit}: React calls it on a submit and hands it the event object.
export default function Player() {
return (
<button onPlayMovie={() => console.log('Playing!')}>
Play Movie
</button>
);
}
What React prints
Unknown event handler property `onPlayMovie`. It will be ignored.Why, and the fix
You may name the event props of your own components as you like, but a built-in <button> only knows browser events such as onClick. Use onClick on the <button>; give your own Toolbar component a prop named onPlayMovie and pass it on: <button onClick={onPlayMovie}>.
React in the browser: React 19.3.0 (development build) and React Testing Library, MIT, served from this site; JSX is compiled by TypeScript 6.0.3, Apache-2.0. Licence and source
5 questions, no hints. Score 80% or more to complete the lesson.
Finish every activity above to unlock the exit ticket.