Create a Todo List with Add & Toggle

React

JavaScript

Technical Specification

Build a todo list where users can add items and mark them as completed.

Input/Output Samples

Input:Add 'Learn React', click it

Output:Todo appears and toggles completed style

Optimal Logic Path

import { useState } from "react";

function TodoList() {
  const [input, setInput] = useState("");
  const [todos, setTodos] = useState([]);

  function addTodo() {
    if (!input.trim()) return;
    setTodos((prev) => [
      ...prev,
      { id: Date.now(), text: input.trim(), completed: false }
    ]);
    setInput("");
  }

  function toggleTodo(id) {
    setTodos((prev) =>
      prev.map((t) =>
        t.id === id ? { ...t, completed: !t.completed } : t
      )
    );
  }

  return (
    <div>
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add todo"
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((t) => (
          <li
            key={t.id}
            onClick={() => toggleTodo(t.id)}
            style={{ textDecoration: t.completed ? "line-through" : "none" }}
          >
            {t.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

Architectural Deep-Dive

We store todos in an array and update immutably. Clicking a todo toggles its completed state.