Events

Event handlers run in response to interaction, making them the right place for updates, navigation commands, and other effects caused by a specific action.

Pass a function

01function CourseCard({ course, onOpen }) {
02  function handleOpen() {
03    onOpen(course.slug);
04  }
05  return <button onClick={handleOpen}>Open {course.title}</button>;
06}

Pass handleOpen, not handleOpen(). Props can carry event handlers upward so the component that owns state decides how it changes.

Event propagation

01<div onClick={() => log("toolbar click")}>
02  <button onClick={(event) => { event.stopPropagation(); save(); }}>Save</button>
03</div>

Events bubble. Stop propagation only when the nested action genuinely should not trigger its ancestor. Use preventDefault() only when replacing a browser default such as form navigation.

Keep this

Pass handlers as values, let state owners handle updates, and preserve browser defaults unless the component fully replaces them.