Intermediate
Typed event handlers for a todo form
Finish the three handlers and give each one its React event type, imported from react: ChangeEvent<HTMLInputElement>, FormEvent<HTMLFormElement> (or SubmitEvent<HTMLFormElement>) and KeyboardEvent<HTMLInputElement>.
Typing in the input (id="new-todo") updates state. Submitting the form adds the trimmed text as a new <li> in <ul id="todos"> and clears the input; empty or blank text adds nothing. The page must not reload (prevent the default submit).
Pressing Escape in the input clears it.
What Check tests
- Typing updates the input
- Submitting adds the trimmed text and clears the input
- Blank text adds nothing
- Escape clears the input
- Handlers use React event types
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.