What React skills does "Build a Todo List" practice?

This challenge practices: useState, array state, forms, event handling. It is rated medium difficulty and takes approximately 20 minutes.

What are the hints for "Build a Todo List"?

Use two state variables: useState ([]) for todos and useState("") for the input Generate unique ids with Date.now(). Use the spread operator to add: [...prev, newTodo] Use array .map() with spread to toggle: prev.map(t => t.id === id ? {...t, completed: !t.completed} : t)

medium20 min

Build a Todo List

Build a fully functional todo list with the ability to add, toggle completion, and delete items. Each todo should show its text with a checkbox for completion status and a delete button. This exercise tests managing an array of objects in state.

Skills

useStatearray stateformsevent handling

Tests

Renders with an empty todo list
Adds a new todo when submitting the form
Toggles a todo as completed
Deletes a todo
Does not add empty todos

Your Code

Loading editor...