Events and handlers

Last reviewed May 28, 2026 Content v20260528

Track mode

client_react

Means

In-browser React TSX

Reading

~1 min

Level

beginner

This lesson

This lesson teaches Events and handlers: the concepts, APIs, and habits you need before advancing in React.

Without Events and handlers, you will struggle to read or extend React codebases and playground exercises.

You will apply Events and handlers in contexts like: SPAs, dashboards, design-system-driven products, and React Native mobile apps.

Write TypeScript/TSX, click Run in browser—React 18 loads from CDN, JSX compiles in the tab, UI renders in the preview root, and printOutput feeds the terminal.

When you can explain the previous lesson's ideas without copying starter code.

React events use camelCase names: onClick, onChange, onSubmit. You pass functions, not strings—no inline onclick="..." HTML attributes.

Handler patterns

Inline arrow: onClick={() => setOpen(true)}
Named function: function handleClick() { ... } then onClick={handleClick}
Pass arguments: onClick={() => remove(id)}

Synthetic events

React wraps native events for cross-browser consistency. Call event.preventDefault() on form submit when you handle submission in JS instead of a full page reload.

Self-check

Why pass onClick={handleClick} instead of onClick={handleClick()}?
When do you need preventDefault on a form?

Challenge

Toggle panel

Wire the button to flip open state.
Show details only when open is true.

Done when: clicking the button shows and hides the details paragraph.

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

Synthetic event surprise?
preventDefault use?

No discussion yet. Be the first to ask a question.