Project: Todo app
- React course
- Beginner
- Lesson 77/84
- 4 min
Review the goal and steps of the todo app project.
Project: Todo app
In this project we'll build a Todo app step by step. Three lessons: entry form, list, and filter/summary. Each lesson builds on the previous.
The data model is simple: each todo is an object — { '{ id, text, done }' }. id is the unique key, text is the task text, done is the completed flag.
State management uses useState: a todos array and a text input. Later in another group we'll rewrite it with useReducer.
Three-step structure
The first lesson writes a TodoForm component: a text input and an add button. It adds the entered text to the todos array.
The second lesson writes TodoList: lists all todos, with a complete/toggle button next to each. Rendered with map, each item gets a unique key.
The third lesson adds filter and summary: show only active/done todos, print the remaining count. This is a good exercise for derived state.
Practice TodoApp skeleton
Complete the skeleton. Write a TodoApp component. Define two states: todos and text. Inside <main>, show <h1>Todo</h1>. Export it. (Form and list are added in later lessons.)
Starter code
import { useState } from "react";
// Write the TodoApp component hereSample solution
import { useState } from "react";
function TodoApp() {
const [todos, setTodos] = useState([]);
const [text, setText] = useState("");
return (
<main>
<h1>Todo</h1>
</main>
);
}
export default TodoApp;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which field is NOT in the todo data model?
- text
- id
- color Correct answer
- done
Explanation: color is not in the model.
2 Todo type
The completion flag of a todo is ____.The completion flag of a todo is done.Explanation: done holds the completion.
3 Match the todo steps
| Term | Meaning |
|---|---|
TodoForm |
Adds text |
TodoList |
Lists |
Filter |
Active/done |
Summary |
Remaining count |