Todo list component
Build a todo list with useState: add, complete and remove items.
intermediateReact
The task
Finish the TodoList component:
- Typing in the input and pressing Add adds a todo (ignore empty text).
- Clicking a todo's text toggles it done (shown with a line through it).
- The ✕ button removes it.
- Show how many todos are left (not done).
Keep the todos in state with useState. Never change the state array directly: always create a new one.
This code runs in a React project, not in the browser here: ask the AI tutor to review it, then compare with the solution.
What you'll build
The finished result. Try it out, then build it yourself below.
Demo · drag the bottom edge to make it taller