Todo List (Component with Local State)

easy

By FrontendAtlas Team · Updated Jan 30, 2026

Create a local-state todo list: add, toggle, and remove items. Keep input state controlled, generate stable ids, and update the todos array immutably so React can detect changes and re-render correctly. Framework focus: React hooks (useState/useEffect), JSX event handling, and one-way props/state flow.

React `useState` for local state Controlled inputs Rendering lists with `map` Event handlers for click and change events Immutable updates for arrays of objects

Requirements

Render a Todo List UI as the main component.
Provide a text input and an 'Add' button to create new tasks.
Render a list of todos with a checkbox and label for each task.
When a task is checked, its text should appear with a line-through style.
Provide a 'Remove' button for each task.
Provide a 'Clear completed' button that removes all completed tasks.

Expected behavior

Typing into the input updates local component state.
Clicking 'Add' with non-empty text adds a new todo and clears the input.
Checking a todo toggles its completed state and updates the line-through style.
Clicking 'Remove' deletes that todo only.
Clicking 'Clear completed' removes all todos whose checkbox is checked.
The empty state message is shown when there are no todos.

Implementation notes

Use `useState` to manage the input value and the array of todo items.
Each todo item should at minimum have `id`, `text`, and `done` fields.
Use array methods like `map` and `filter` to update the todos immutably.
Use a derived boolean to decide when to show the empty state and footer.

Guides

Shipping Code Under PressurePlaybook JavaScript Problems That Actually Show UpPlaybook Build Great UI in 60 MinutesPlaybook

Preparing for interviews? Use guided tracks for structure, then drill company-specific question sets when you need targeted practice.

Explore interview tracks Browse company questions Open React prep path

Files

Select a file

No preview yet. Click “Rebuild preview”.