Guided Notes

Handling Events

onClick and friends, passing arguments, the event object, preventDefault, and handlers as props.

React events

Slide 1 / 5

React events are written in camelCase and take a function, not a string:

// HTML: <button onclick="save()"> <button onClick={save}>Save</button>

Pass the function itself — don't call it:

onClick={save} // right: runs on click onClick={save()} // wrong: runs during render

Common events: onClick, onChange, onSubmit, onKeyDown, onFocus, onBlur, onMouseEnter, onMouseLeave. Handlers are usually defined inside the component so they can read props and state:

function handleClick() { setOpen(true); }

← State with useState