Todo App

Build a task manager with filtering and local storage persistence.

StatePropsHooks

Overview

A todo app is the classic first React project because it exercises the three ideas everything else in React builds on: state that a component owns and updates over time, props that pass data and behavior down to child components, and a `useEffect` hook that synchronizes that state with something outside React itself — here, `localStorage`. Nothing about it needs routing, a server, or global state, so it stays focused on those fundamentals.

By the end of this tutorial you will have a task manager where a single `tasks` array in the top-level `App` component is the one source of truth. A `TodoItem` component renders each row from props it receives, a `FilterBar` component switches between All/Active/Completed views, and a `useEffect` hook keeps every change saved to `localStorage` so the list survives a page refresh.

What You'll Build

A `tasks` array held in `App` with `useState`, updated immutably on every change.
A `TodoItem` component that receives a task and callbacks as props and renders one row.
A controlled form that adds a new task without reloading the page.
Click-to-toggle-complete and a delete button, both implemented as callback props passed down from `App`.
A `FilterBar` component for switching between All, Active, and Completed views.
Automatic saving to and loading from `localStorage` with `useEffect`, so tasks persist across reloads.

Prerequisites

JSX basics — writing markup inside a `return` statement and embedding expressions with `{}`.
Function components — a component is just a function that returns JSX.
Props — passing data and functions into a component as its argument, and reading them back out.
Solid core JavaScript — array methods (`map`, `filter`), spreading objects/arrays with `...`, and arrow functions.
This is your first React project, so `useState` and `useEffect` are introduced here from scratch — you do not need to know them already.

Project Structure

The app is split into three components, each with one clear job. `App` is the only component that holds state — it owns the `tasks` array, the current `filter`, and every function that changes them. `TodoItem` and `FilterBar` hold no state of their own; they are purely props-driven, meaning everything they display or trigger comes in as a prop from `App`. Keeping state in exactly one place (a pattern called "lifting state up") is what guarantees the list, the filter buttons, and `localStorage` can never disagree about what the current tasks actually are.

src/
  App.jsx        // Owns tasks[] and filter state; the only component that changes them
  TodoItem.jsx   // One task row; purely props-driven, no state of its own
  FilterBar.jsx  // The All / Active / Completed buttons; purely props-driven
  index.css      // Shared dark-theme styling for the whole app
  index.jsx      // Mounts <App /> into the page with ReactDOM

Here is the shared stylesheet used by every component below. It does not change again after this — every remaining step only edits component files.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #1a1d23;
  color: #e8e8e8;
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}

.todo-app {
  width: 100%;
  max-width: 420px;
  background: #23262e;
  border-radius: 10px;
  padding: 24px;
}

.todo-app h1 {
  margin-bottom: 16px;
  font-size: 1.5rem;
}

.todo-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.todo-form input {
  flex: 1; /* input grows to fill the space; the button keeps its natural width */
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #3a3f4b;
  background: #1a1d23;
  color: #e8e8e8;
  font-size: 1rem;
}

.todo-form button {
  padding: 10px 16px;
  border: none;
  border-radius: 6px;
  background: #4f8cff;
  color: white;
  cursor: pointer;
  font-weight: bold;
}

.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.filter-btn {
  flex: 1;
  padding: 8px 0;
  border: 1px solid #3a3f4b;
  border-radius: 6px;
  background: transparent;
  color: #9aa4b2;
  cursor: pointer;
}

.filter-btn.active {
  background: #4f8cff;
  color: white;
  border-color: #4f8cff;
}

.todo-list {
  list-style: none;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  border-bottom: 1px solid #3a3f4b;
}

.todo-item.completed .todo-text {
  text-decoration: line-through; /* visual cue that a task is finished */
  opacity: 0.6;
}

.todo-text {
  flex: 1;
  cursor: pointer; /* clicking the text (not just a checkbox) toggles completion */
}

.delete-btn {
  background: transparent;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.empty-message {
  text-align: center;
  color: #888;
  padding: 12px 0;
}

Step 1: Set Up State with useState

`useState` gives a function component memory that survives between renders. `App` needs three independent pieces of state: the tasks themselves, the text currently being typed into the "add task" input, and which filter is active — each gets its own `useState` call rather than being crammed into one object, since they change independently of each other.

import { useState } from 'react';

function App() {
  // tasks is the single source of truth for every task in the list — every
  // other piece of UI (the rendered rows, the filter counts) is derived FROM
  // this array on every render, never stored as a separate copy
  const [tasks, setTasks] = useState([]);

  // What the user is currently typing in the "add task" input. Kept separate
  // from tasks because draft text isn't a task yet — it only becomes one
  // when the form is submitted
  const [newTaskText, setNewTaskText] = useState('');

  // 'all' | 'active' | 'completed' — a string is enough here, no need for a
  // whole object just to track which filter button is selected
  const [filter, setFilter] = useState('all');

  return (
    <div className="todo-app">
      <h1>My Tasks</h1>
      {/* Form, list, and filter bar are filled in over the next steps */}
    </div>
  );
}

export default App;

Every task will be a plain object shaped like `{ id, text, completed }` — the same shape the plain-JavaScript version of this project would use, since React state is still just JavaScript data. React's job is only to keep the screen in sync with it.

Step 2: Render Tasks with a TodoItem Component

`TodoItem` is a separate component so `App`'s render logic stays a simple `.map()` instead of a long block of row-building JSX. It receives a `task` object and two callback functions as props — it never touches `tasks` directly, because `App` is the only component allowed to change that state.

// A single row in the task list. It owns no state of its own — everything
// it needs to display or trigger arrives as a prop from its parent, which is
// what keeps App's tasks array as the one and only source of truth
function TodoItem({ task, onToggle, onDelete }) {
  return (
    <li className={'todo-item ' + (task.completed ? 'completed' : '')}>
      {/* Clicking the text calls the callback passed down from App instead
          of mutating task.completed directly — this component has no
          access to setTasks and shouldn't need it */}
      <span className="todo-text" onClick={() => onToggle(task.id)}>
        {task.text}
      </span>
      <button
        type="button"
        className="delete-btn"
        onClick={() => onDelete(task.id)}
      >
        &times;
      </button>
    </li>
  );
}

export default TodoItem;

Back in `App`, `tasks.map()` turns the array into one `<TodoItem>` per task. The `key` prop is required on every item in a list — it is how React matches each `<TodoItem>` to the same underlying task across re-renders instead of throwing every row away and rebuilding it from scratch.

import { useState } from 'react';
import TodoItem from './TodoItem';

function App() {
  const [tasks, setTasks] = useState([]);
  const [newTaskText, setNewTaskText] = useState('');
  const [filter, setFilter] = useState('all');

  return (
    <div className="todo-app">
      <h1>My Tasks</h1>

      {tasks.length === 0 && <p className="empty-message">No tasks yet. Add one below to get started!</p>}

      <ul className="todo-list">
        {tasks.map((task) => (
          // key must be stable and unique per item, not the array index —
          // an index would break if tasks are ever reordered or deleted
          <TodoItem
            key={task.id}
            task={task}
            onToggle={() => {}} // wired up for real in Step 4
            onDelete={() => {}} // wired up for real in Step 4
          />
        ))}
      </ul>
    </div>
  );
}

export default App;

Step 3: Add a New Task

The input is a "controlled" input — its `value` always comes from state, and every keystroke updates that state through `onChange`, so React state and the visible input can never drift apart. Submitting the form builds a new task object and adds it to `tasks` with `setTasks`.

function handleSubmit(event) {
  event.preventDefault(); // stop the browser's default full-page reload on form submit

  const trimmed = newTaskText.trim(); // trim() so a string of only spaces doesn't create a blank task
  if (trimmed === '') {
    return; // silently ignore empty submissions
  }

  const newTask = {
    id: Date.now(), // a timestamp is unique enough for a client-only list; a real backend would assign this instead
    text: trimmed,
    completed: false,
  };

  // Never mutate tasks directly (e.g. tasks.push(newTask)) — React decides
  // whether to re-render by comparing array REFERENCES, so a brand-new
  // array has to be created for the update to be noticed
  setTasks((prevTasks) => [...prevTasks, newTask]);
  setNewTaskText(''); // clear the controlled input now that the task was added
}

// Inside the returned JSX, above the task list:
<form className="todo-form" onSubmit={handleSubmit}>
  <input
    type="text"
    value={newTaskText} // controlled: React state is the only source of truth for what's shown
    onChange={(event) => setNewTaskText(event.target.value)}
    placeholder="What do you need to do?"
    autoComplete="off"
  />
  <button type="submit">Add</button>
</form>

What Happens in the tasks Array

Click Run to see what this code prints.

Step 4: Toggle and Delete Tasks

Both `toggleTask` and `deleteTask` live in `App`, right next to `tasks`, and get passed down to every `TodoItem` as the `onToggle`/`onDelete` props. Neither function ever mutates an existing task object or the array in place — each returns a brand-new array so React reliably detects the change.

function toggleTask(id) {
  // map() returns a new array; only the matching task gets a new object —
  // every other task's object reference is reused as-is, since it didn't change
  setTasks((prevTasks) =>
    prevTasks.map((task) =>
      task.id === id ? { ...task, completed: !task.completed } : task
    )
  );
}

function deleteTask(id) {
  // filter() also returns a new array — the deleted task simply isn't in it
  setTasks((prevTasks) => prevTasks.filter((task) => task.id !== id));
}

// Now the real callbacks replace the empty placeholders from Step 2:
<TodoItem
  key={task.id}
  task={task}
  onToggle={toggleTask}
  onDelete={deleteTask}
/>

Step 5: Filter Tasks by Status

`filteredTasks` is calculated fresh on every render from `tasks` and `filter` — it is never stored in its own `useState`. Deriving it instead of duplicating it means the filtered view can never fall out of sync with the real task list, which would be an easy bug to introduce if it were tracked as separate state.

// One small, purely props-driven component per filter button
function FilterBar({ filter, onFilterChange }) {
  const filters = ['all', 'active', 'completed'];

  return (
    <div className="filter-bar">
      {filters.map((f) => (
        <button
          key={f}
          type="button"
          className={'filter-btn ' + (filter === f ? 'active' : '')}
          onClick={() => onFilterChange(f)}
        >
          {f.charAt(0).toUpperCase() + f.slice(1)}
        </button>
      ))}
    </div>
  );
}

export default FilterBar;

// Back in App, computed once per render, right before the JSX that uses it —
// derived data, not its own piece of state
const filteredTasks = tasks.filter((task) => {
  if (filter === 'active') return !task.completed;
  if (filter === 'completed') return task.completed;
  return true; // filter === 'all'
});

// <FilterBar filter={filter} onFilterChange={setFilter} /> — setFilter is
// passed directly as the callback since useState's setter already accepts
// the new value as its only argument, no wrapper function needed
// <ul className="todo-list"> then maps over filteredTasks instead of tasks

Step 6: Persist Tasks with useEffect

Two separate mechanisms handle loading and saving. Loading uses `useState`'s lazy initializer — a function passed to `useState` that runs exactly once, on the very first render, which avoids a flash of an empty list before `localStorage` is read. Saving uses `useEffect` with a `[tasks]` dependency array, so it re-runs only on renders where `tasks` actually changed, not on every render (like the ones caused by typing in the input).

import { useState, useEffect } from 'react';

const STORAGE_KEY = 'react-todo-app-tasks';

function App() {
  // The function passed here only runs ONCE, on mount — reading
  // localStorage in a lazy initializer (rather than in a useEffect that
  // runs AFTER the first render) means tasks starts correct immediately,
  // with no visible flash of an empty list first
  const [tasks, setTasks] = useState(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? JSON.parse(saved) : [];
  });

  const [newTaskText, setNewTaskText] = useState('');
  const [filter, setFilter] = useState('all');

  // Runs after every render where tasks changed since the previous render.
  // The [tasks] dependency array is what limits it to those renders instead
  // of saving on every keystroke in the unrelated newTaskText input
  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
  }, [tasks]);

  // ...rest of the component from the previous steps
}

`setTasks` itself is intentionally left out of the dependency array — React guarantees the setter function returned by `useState` never changes identity between renders, so including it would add noise without changing when the effect runs.

Complete Code

Here is the complete project — the stylesheet and every component file, fully assembled from the steps above.

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #1a1d23;
  color: #e8e8e8;
  display: flex;
  justify-content: center;
  padding: 40px 16px;
}

.todo-app { width: 100%; max-width: 420px; background: #23262e; border-radius: 10px; padding: 24px; }
.todo-app h1 { margin-bottom: 16px; font-size: 1.5rem; }
.todo-form { display: flex; gap: 8px; margin-bottom: 16px; }
.todo-form input { flex: 1; padding: 10px 12px; border-radius: 6px; border: 1px solid #3a3f4b; background: #1a1d23; color: #e8e8e8; font-size: 1rem; }
.todo-form button { padding: 10px 16px; border: none; border-radius: 6px; background: #4f8cff; color: white; cursor: pointer; font-weight: bold; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; }
.filter-btn { flex: 1; padding: 8px 0; border: 1px solid #3a3f4b; border-radius: 6px; background: transparent; color: #9aa4b2; cursor: pointer; }
.filter-btn.active { background: #4f8cff; color: white; border-color: #4f8cff; }
.todo-list { list-style: none; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid #3a3f4b; }
.todo-item.completed .todo-text { text-decoration: line-through; opacity: 0.6; }
.todo-text { flex: 1; cursor: pointer; }
.delete-btn { background: transparent; border: none; color: #ff6b6b; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.empty-message { text-align: center; color: #888; padding: 12px 0; }

// TodoItem.jsx
function TodoItem({ task, onToggle, onDelete }) {
  return (
    <li className={'todo-item ' + (task.completed ? 'completed' : '')}>
      <span className="todo-text" onClick={() => onToggle(task.id)}>
        {task.text}
      </span>
      <button type="button" className="delete-btn" onClick={() => onDelete(task.id)}>
        &times;
      </button>
    </li>
  );
}

export default TodoItem;

// FilterBar.jsx
function FilterBar({ filter, onFilterChange }) {
  const filters = ['all', 'active', 'completed'];

  return (
    <div className="filter-bar">
      {filters.map((f) => (
        <button
          key={f}
          type="button"
          className={'filter-btn ' + (filter === f ? 'active' : '')}
          onClick={() => onFilterChange(f)}
        >
          {f.charAt(0).toUpperCase() + f.slice(1)}
        </button>
      ))}
    </div>
  );
}

export default FilterBar;

// App.jsx
import { useState, useEffect } from 'react';
import TodoItem from './TodoItem';
import FilterBar from './FilterBar';

const STORAGE_KEY = 'react-todo-app-tasks';

function App() {
  const [tasks, setTasks] = useState(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
    return saved ? JSON.parse(saved) : [];
  });
  const [newTaskText, setNewTaskText] = useState('');
  const [filter, setFilter] = useState('all');

  useEffect(() => {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
  }, [tasks]);

  function handleSubmit(event) {
    event.preventDefault();
    const trimmed = newTaskText.trim();
    if (trimmed === '') return;

    setTasks((prevTasks) => [
      ...prevTasks,
      { id: Date.now(), text: trimmed, completed: false },
    ]);
    setNewTaskText('');
  }

  function toggleTask(id) {
    setTasks((prevTasks) =>
      prevTasks.map((task) => (task.id === id ? { ...task, completed: !task.completed } : task))
    );
  }

  function deleteTask(id) {
    setTasks((prevTasks) => prevTasks.filter((task) => task.id !== id));
  }

  const filteredTasks = tasks.filter((task) => {
    if (filter === 'active') return !task.completed;
    if (filter === 'completed') return task.completed;
    return true;
  });

  return (
    <div className="todo-app">
      <h1>My Tasks</h1>

      <form className="todo-form" onSubmit={handleSubmit}>
        <input
          type="text"
          value={newTaskText}
          onChange={(event) => setNewTaskText(event.target.value)}
          placeholder="What do you need to do?"
          autoComplete="off"
        />
        <button type="submit">Add</button>
      </form>

      <FilterBar filter={filter} onFilterChange={setFilter} />

      {filteredTasks.length === 0 && (
        <p className="empty-message">No tasks to show.</p>
      )}

      <ul className="todo-list">
        {filteredTasks.map((task) => (
          <TodoItem key={task.id} task={task} onToggle={toggleTask} onDelete={deleteTask} />
        ))}
      </ul>
    </div>
  );
}

export default App;

Sample Run

Sample Interaction

Click Run to see what this code prints.

Extend This Project

Add an "editing" state to `TodoItem` so double-clicking a task turns its text into an `<input>`, saved on blur or Enter.
Add a "Clear Completed" button in `App` that filters every completed task out of `tasks` in one click.
Add a due date with `<input type="date">` in the form, stored as another field on each task object.
Show a live count of remaining active tasks next to the filter bar, computed the same derived way as `filteredTasks`.
Extract the localStorage load/save logic into a reusable `useLocalStorage` custom hook so other projects can share it.

Summary

You built a complete, persistent Todo App using `useState` for state, props to pass data and callbacks down to child components, and `useEffect` to synchronize that state with `localStorage`. The core pattern — state lives in one place, gets passed down as props, and changes flow back up through callbacks — is the foundation for every React project you build next, including the other three in this course.