The todo list is the React interview baseline — the interviewer is grading the details, not whether it works.

The implementation

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState("");

  const addTodo = (e) => {
    e.preventDefault();                       // it's a form → Enter works too
    const trimmed = text.trim();
    if (!trimmed) return;                     // reject empty/whitespace
    setTodos((prev) => [...prev, { id: crypto.randomUUID(), text: trimmed }]);
    setText("");                              // clear the input
  };

  const removeTodo = (id) =>
    setTodos((prev) => prev.filter((t) => t.id !== id));

  return (
    <div>
      <form onSubmit={addTodo}>
        <input
          value={text}
          onChange={(e) => setText(e.target.value)}
          placeholder="Add a todo"
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>                  {/* stable id, NOT index */}
            {todo.text}
            <button onClick={() => removeTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

What's actually being graded

• Stable keys — key={todo.id}, not key={index}. With index keys, deleting an item makes React reconcile wrong — input state and focus jump to the wrong row.
• Controlled input — value + onChange; React owns the input state.
• Immutable updates — [...prev, new] and .filter(), never push/splice on state.
• Functional state updater — setTodos(prev => ...) avoids stale-state bugs.
• Validation — trim() and reject empty input.
• A <form> with onSubmit — so pressing Enter adds the todo, not just clicking. e.preventDefault() stops the page reload.
• Clear the input after adding.

Likely follow-ups to be ready for

Toggle complete (add a done boolean, line-through styling), edit in place, filter (all/active/done), persist to localStorage, and lift state / use a reducer when it grows.

The framing

"State is an array of {id, text} plus the controlled input string. Add appends immutably with a functional updater; delete filters by id. The details that matter: a real id for the key — never the index — a <form onSubmit> so Enter works, trim-and-reject-empty validation, and clearing the input after adding. Those details are the actual test."