Project: A Todo App

State, lists, controlled inputs and derived values together. Add tasks, tick them off, and filter. Then try adding a "clear completed" button.

Examplereact

function App() {
  const [todos, setTodos] = useState([
    { id: 1, text: "Learn React", done: true },
    { id: 2, text: "Build a todo app", done: false },
  ]);
  const [text, setText] = useState("");
  const [filter, setFilter] = useState("all");

function add(e) {
    e.preventDefault();
    if (!text.trim()) return;
    setTodos([...todos, { id: Date.now(), text: text.trim(), done: false }]);
    setText("");
  }

function toggle(id) {
    setTodos(todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t)));
  }

const shown = todos.filter((t) => filter === "all" || (filter === "done" ? t.done : !t.done));
  const left = todos.filter((t) => !t.done).length;

return (
    <div>
      <form onSubmit={add}>
        <input value={text} onChange={(e) => setText(e.target.value)} placeholder="New task" />
        <button>Add</button>
      </form>
      <p>
        {["all", "open", "done"].map((f) => (
          <button key={f} onClick={() => setFilter(f)} disabled={filter === f}>{f}</button>
        ))}
      </p>
      <ul>
        {shown.map((t) => (
          <li key={t.id} onClick={() => toggle(t.id)} style={{ cursor: "pointer", textDecoration: t.done ? "line-through" : "none" }}>
            {t.text}
          </li>
        ))}
      </ul>
      <p>{left} task(s) left</p>
    </div>
  );
}

Open in editor »

Quick check

In this app, why is `left` calculated instead of stored in state?

State cannot hold numbersIt can always be derived from `todos`, so a separate copy could get out of syncTo make the page faster

Finish the quick check (and any code exercise) to complete this lesson, or mark it done yourself.

Tip: use the left and right arrow keys to move between lessons.