currentTarget vs target, and two styles of handler props
Clicking the title <span> still runs the <li> handler (the event bubbles up), so target is SPAN while currentTarget is LI. That's why target is typed only as EventTarget and needs a cast to read tagName. The Remove button stops the event, so the row isn't selected too. Inside the inline onRemove arrow, e is typed for you from MouseEventHandler<HTMLButtonElement>.
Inline handlers get their event type for free; separate handler functions use React's event types such as ChangeEvent<HTMLInputElement>, MouseEvent<HTMLButtonElement> and FormEvent<HTMLFormElement>, and event.currentTarget is the typed element the handler is attached to.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a SearchInput with a separate handleChange typed with ChangeEvent<HTMLInputElement> and a handleKeyDown that logs search: <text> when Enter is pressed.
Write a Tabs component with props tabs: string[] and onChange: (index: number) => void, which renders a button per tab and calls onChange with the index.
Explain it without notes
Why don't inline handlers need event types, but separate handler functions do?
What's the difference between e.target and e.currentTarget, and why are they typed differently?
How would you type an onSelect prop and an onClick prop on your own components?
Why can e: MouseEvent fail to match onClick even though the names match?
Preview
Console
Nothing logged yet.Expected console output
currentTarget: LI | target: LI
selected song 1
currentTarget: LI | target: SPAN
selected song 1
remove clicked, button text: Remove