React Task Management Application

A React task manager maintains typed task state, adds and completes tasks, and renders the list. The real TSX companion illustrates a controlled input and immutable state updates; the primary example isolates the task-state transition so it can run without React installed.

toggleTodo returns new task objects for the matching ID, leaving the original state unchanged. A real React component uses setTodos(previous => toggleTodo(previous, id)) to trigger a rerender.

Mutating the existing state array or depending on a stale state closure can cause missing or overwritten updates.

This source was compiled using TypeScript 5.8.3 with strict checking, then executed with Node.js 22.16.0. Its stdout below is the actual captured output. The core logic is runnable without a framework or a remote API; integration-specific examples appear in a separate lab when needed.

TypeScript source

type Todo = Readonly<{ id: number; title: string; done: boolean }>;
function toggleTodo(items: readonly Todo[], id: number): Todo[] {
  return items.map(item => item.id === id ? { ...item, done: !item.done } : item);
}
const initial: Todo[] = [{ id: 1, title: "Learn hooks", done: false }, { id: 2, title: "Build UI", done: false }];
console.log(toggleTodo(initial, 2));
console.log(initial[1].done);

Verified output

[
  { id: 1, title: 'Learn hooks', done: false },
  { id: 2, title: 'Build UI', done: true }
]
false

Compile: npx tsc --strict --target es2022 --module commonjs react-task-management-application.ts; run: node react-task-management-application.js. For examples importing node: modules, install @types/node as a development dependency; for browser or React projects use the separate lab setup.

toggleTodo returns new task objects for the matching ID, leaving the original state unchanged. A real React component uses setTodos(previous => toggleTodo(previous, id)) to trigger a rerender.

Before editing the code, predict what the output will be for one changed input. Run it and compare your prediction with the actual result.

Integration companion: The primary example above is self-contained. The files below demonstrate a real framework, runtime, or project setup and may need additional packages or a browser.

src/Tasks.tsx

import { useState, type FormEvent } from "react";
type Todo = Readonly<{ id: number; title: string; done: boolean }>;
export default function Tasks() {
  const [tasks, setTasks] = useState<Todo[]>([]);
  const [title, setTitle] = useState("");
  function add(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!title.trim()) return;
    setTasks(current => [...current, { id: Date.now(), title: title.trim(), done: false }]);
    setTitle("");
  }
  return <section><h1>Tasks</h1><form onSubmit={add}>
    <input aria-label="Task title" value={title} onChange={e => setTitle(e.currentTarget.value)} />
    <button>Add</button></form>
    <ul>{tasks.map(task => <li key={task.id}><label>
      <input type="checkbox" checked={task.done} onChange={() => setTasks(current =>
        current.map(item => item.id === task.id ? { ...item, done: !item.done } : item))} />
      {task.title}</label></li>)}</ul>
  </section>;
}

Setup and execution

npm create vite@latest typed-tasks -- --template react-ts
cd typed-tasks
Edit src/App.tsx with the component shown above
npm install
npm run dev
npm run build

This is a real React TSX component, not a Node-only simulation. Use the React+TypeScript Vite template, and place the component in the application's src/App.tsx. Its imports require React packages and @types/react; browser behavior was not executed in this environment.

Validation: This companion requires the named external packages or browser environment. Its runtime behavior was not executed during the course build.

Mutating the existing state array or depending on a stale state closure can cause missing or overwritten updates.

Determine whether the issue belongs to the type system, a trust boundary, or actual runtime behavior before choosing a correction.

Create a TSX page with an add form, task list, completion buttons, empty-state message, and stable keys.

Record expected success and failure outcomes, run the code, and compare the observed behavior. Keep the exercise compatible with strict type checking.

toggleTodo returns new task objects for the matching ID, leaving the original state unchanged. A real React component uses setTodos(previous => toggleTodo(previous, id)) to trigger a rerender.

Apply the same reasoning to the practice task, then integrate it into a real app only when the runtime and dependency setup are ready.