Todo List

React

Junior

Lists & keysImmutable updates

Create a Todo List component that manages text items held entirely in local component state. The list starts empty.

Requirements

Clicking "Add" adds the trimmed text as a new item and clears the input.
Each todo shows its text and <button data-testid="remove-btn">x</button> that deletes only that item.
Render todos inside <ul data-testid="todo-list">, each in an <li data-testid="todo-item">.
Keep state immutable: create new arrays when adding or removing.

Note

Do not edit data-testid attributes: they are used for testing.

App.js

import TodoList from "./TodoList";

export default function App() {
  return (
    <div className="min-h-screen bg-gray-50 p-4 flex justify-center">
      <TodoList />
    </div>
  );
}

Browser

JavaScript Console

console.log()

statements will appear here

AI Analyzer