React
Filter and summary
Add active/completed filters and the remaining count.
Filter and summary
The final lesson will assemble TodoApp and add filter and summary. The filter state: "all", "active", "done". Visible todos are computed based on this filter.
Derived state can be computed without useMemo: on each render, const visible = todos.filter(t => ...). React already does this fast; useMemo is used only in extreme cases.
Summary: const remaining = todos.filter(t => !t.done).length. The screen shows <p>{ '{ remaining }' } remaining</p>.
Three pieces merge
TodoApp merges TodoForm and TodoList. The handleAdd function adds a new todo; handleToggle flips the done flag.
visible is computed on each render based on the filter and passed to TodoList as todos={ '{ visible }' }. So the list renders only visible items.
For the summary, remaining is computed separately and printed. This is where the three lessons meet; all pieces work together in one file.
Exercise TodoApp full
Complete the skeleton. Write a TodoApp component. Define three states: todos, text, filter. Compute visible with the filter. Compute remaining. Inside <main>, show <h1>Todo</h1>, <p>{ '{ remaining }' } remaining</p>, and <ul> with visible.map. Export it.
Show example solution
import { useState } from "react";
function TodoApp() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
const [filter, setFilter] = useState("all");
const visible = filter === "all" ? todos : todos.filter((t) => filter === "done" ? t.done : !t.done);
const remaining = todos.filter((t) => !t.done).length;
return (
<main>
<h1>Todo</h1>
<p>{remaining} remaining</p>
<ul>
{visible.map((todo) => (
<li key={todo.id}>{todo.text}</li>
))}
</ul>
</main>
);
}
export default TodoApp;
Test yourself
-
Derived data
Visible todos are computed with ____.
Show answer
Visible todos are computed with filter.
-
Where should derived data be computed?
- In localStorage
- In the render body
- In useRef
- Inside useEffect
Show answer
In the render body — Computed in the render body.
-
Match the filter options
- all
- All
- active
- To do
- done
- Completed
- remaining
- Left
Next lesson: Challenge: Weather card
