Solution

You'll build a single React component that owns the task list and a draft input, with two user actions: add and delete.

The problem, in plain English

A todo list is the smallest interesting React component: it has state, it accepts user input through a form, and it renders a dynamic list. Three things have to work together: an array of tasks, an input that the user can type into and submit, and a delete button next to each task.

The mental model

One component owns everything. The user-facing tree is shallow — <App> renders a <form> and a <ul>. The <ul> maps the tasks array to <li> rows; each row carries a delete button that fires a callback back up to <App>.

State lives in App because both children (the form and the list) need to read or update it. Lifting it any higher (e.g. into a context) is over-engineering for two readers.

A first attempt

A reasonable first try makes the input uncontrolled and pushes onto the tasks array in place:

export default function App() {
  const tasks = [];

  function handleSubmit(e) {
    e.preventDefault();
    const input = document.querySelector('input');
    tasks.push({ id: Math.random(), text: input.value });
    input.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input />
      <button>Add</button>
      <ul>{tasks.map((t) => <li>{t.text}</li>)}</ul>
    </form>
  );
}

Three things go wrong:

1. tasks is a local variable, not state. Pushing to it doesn't trigger a re-render. The new task never appears.
2. The input is uncontrolled and queried via the DOM. Works once, but doesn't compose — you can't disable Submit while the input is empty, can't focus-manage, can't validate.
3. No key on <li>. React warns, and once you have deletion, missing keys cause the wrong rows to update.

The working solution

import { useId, useState, type FormEvent } from 'react';
import './styles.css';

type Task = { id: string; text: string };

const initial: Task[] = [
  { id: '1', text: 'Walk the dog' },
  { id: '2', text: 'Water the plants' },
  { id: '3', text: 'Wash the dishes' },
];

export default function App() {
  const [tasks, setTasks] = useState<Task[]>(initial);
  const [draft, setDraft] = useState('');
  const inputId = useId();

  function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const text = draft.trim();
    if (!text) return;
    setTasks((prev) => [...prev, { id: crypto.randomUUID(), text }]);
    setDraft('');
  }

  function handleDelete(id: string) {
    setTasks((prev) => prev.filter((t) => t.id !== id));
  }

  return (
    <main>
      <h1>Todo List</h1>
      <form onSubmit={handleSubmit}>
        <label htmlFor={inputId}>Add your task</label>
        <input
          id={inputId}
          value={draft}
          onChange={(e) => setDraft(e.target.value)}
          placeholder="Add your task"
        />
        <button type="submit" disabled={!draft.trim()}>Submit</button>
      </form>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <span>{task.text}</span>
            <button onClick={() => handleDelete(task.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </main>
  );
}

The shifts from the first attempt:

• useState for both tasks and draft so React knows when to re-render.
• Controlled input — value={draft} and onChange={setDraft} keep the input's text and the state in lockstep.
• crypto.randomUUID() for stable ids, used as the key on each <li>.
• Spread ([...prev, ...]) and filter to update the array without mutating it.

Walking through the three updates

• Typing — every keystroke fires onChange, which calls setDraft(e.target.value). React schedules a re-render; the input's value reflects the new draft.
• Submitting — onSubmit fires. We preventDefault (so the page doesn't reload), trim the draft, bail if empty, then call setTasks(prev => [...prev, newTask]). The spread creates a new array; React sees the new reference and re-renders the list. We also setDraft('') to clear the input.
• Deleting — onClick on a delete button calls handleDelete(id). We call setTasks(prev => prev.filter(t => t.id !== id)) — again a new array, this time without the matching task.

Gotchas

• Mutating state in place — tasks.push(newTask) does not trigger a re-render. Always return a new array ([...prev, newTask] or prev.filter(...)).
• Array index as key — when the list mutates (add/delete), indices shift. React reuses the wrong DOM nodes and components carry stale state. Use a stable id.
• Functional updates — setTasks(prev => ...) reads prev at update time. setTasks([...tasks, newTask]) captures tasks at render time and can stale-out under batched updates. Prefer the functional form when the new value depends on the old.
• Uncontrolled input + ref poking — works for the demo, breaks when you need validation, disabled-while-empty, or external clearing. Controlled is the default in 2026.
• Forgetting event.preventDefault() in onSubmit — the form submits to the page URL, triggering a full reload that wipes state.

Going further

Once add and delete work, the natural extensions are:

• Edit in place — double-click a task to toggle into edit mode, save on blur or Enter.
• Toggle completed — add a done: boolean field, render with strikethrough.
• Persist to localStorage — useEffect mirrors tasks into localStorage; another useEffect reads it on mount.
• Optimistic remote sync — replace setTasks with a mutation against an API, with rollback on failure.

Each is a small addition on top of the foundation here.

Alternative solutions

import { useReducer, useState } from 'react';
import './styles.css';

const INITIAL = ['Walk the dog', 'Water the plants', 'Wash the dishes'];
type Action = { type: 'add'; text: string } | { type: 'delete'; index: number };

function reducer(tasks: string[], action: Action): string[] {
  if (action.type === 'add') return [...tasks, action.text];
  return tasks.filter((_, index) => index !== action.index);
}

export default function App() {
  const [tasks, dispatch] = useReducer(reducer, INITIAL);
  const [draft, setDraft] = useState('');

  function submit(event: React.FormEvent) {
    event.preventDefault();
    const text = draft.trim();
    if (!text) return;
    dispatch({ type: 'add', text });
    setDraft('');
  }

  return (
    <main className="todo">
      <h1>Todo List</h1>
      <form className="todo-form" onSubmit={submit}>
        <input value={draft} onChange={(event) => setDraft(event.target.value)}
          placeholder="Add your task" autoComplete="off" />
        <button type="submit">Submit</button>
      </form>
      <ul className="todo-list">
        {tasks.map((task, index) => (
          <li key={`${task}-${index}`}>
            <span className="todo-text">{task}</span>
            <button type="button" className="delete"
              onClick={() => dispatch({ type: 'delete', index })}>Delete</button>
          </li>
        ))}
      </ul>
    </main>
  );
}