Todo List with Filters
Build a fully functional todo list where users can add tasks, mark them complete, delete them, and filter the list by status.
Requirements
- Add a new todo by typing in an input and pressing Enter or clicking Add
- Mark any todo as complete/incomplete via a checkbox
- Delete any todo with a remove button
- Filter the list: All | Active (incomplete) | Completed
- Display a count of remaining (incomplete) items at the bottom
- Persist state across filter changes without losing todos
Key Patterns
useStateuseMemo (derived state)Array.filter()Array.map()Controlled input
Important
Interview Tip
Avoid duplicating state. The filtered list is DERIVED from todos + filter — compute it with useMemo, never store it separately in state.
- Buy groceries
- Read a React book
- Build a machine coding project
2 items left