Event handlers

Pass a function to onClick, onChange or onSubmit and React calls it with the event. Handlers usually update state, call a prop callback, or prevent the browser's default action.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what React passes to a handler and when it runs
Write handlers for click, change and submit that update state
Spot onClick={onDelete(id)} and explain what it does during render

In practice

A few lines that show Event handlers doing its job.

TSX

function DeleteButton({ id, onDelete }: { id: string; onDelete: (id: string) => void }) {
  return (
    <button
      onClick={(event) => {
        event.stopPropagation();   // the row behind it has its own click
        onDelete(id);
      }}
    >
      Delete
    </button>
  );
}

The common mistake

Watch for

Writing onClick={onDelete(id)}. That calls the function during render and passes its result as the handler. Pass a function: onClick={() => onDelete(id)}.

What to know first

Your roadmap puts these before Event handlers, unless you already know them.

useState

How it stays learned

Once a session shows you understand Event handlers, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Where it leads

Topics that build on Event handlers.

Previous in the module← useState

Next in the moduleLifting state up →