Project: Todo app

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.

Exercise 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.)

Show example solution

import { useState } from "react";

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");
  return (
    <main>
      <h1>Todo</h1>
    </main>
  );
}

export default TodoApp;

Test yourself

Which field is NOT in the todo data model?
- text
- id
- color
- done
Show answer

color — color is not in the model.

Todo type

The completion flag of a todo is ____.

Show answer

The completion flag of a todo is done.

Match the todo steps

TodoForm

Adds text
TodoList

Lists
Filter

Active/done
Summary

Remaining count

Next lesson: Todo entry form

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies