Todo List

React

Junior

Lists & keysImmutable updates

Requirements:

Create a Todo List component that lets a user manage a list of text items held entirely in local component state.
Start with an empty list.
Clicking the “Add” button should add the trimmed text as a new list item and clear the input.
Each rendered todo must show its text and a “Remove” button that deletes only that item (<button ... data-testid="remove-btn">x</button> - it must have data-testid attribute and display x).
Render every todo inside <ul data-testid="todo-list"> with each item wrapped in an <li data-testid="todo-item">.
Keep state immutable: create new arrays when adding or removing.

Note:

Do not edit data-testid attributes on any element as 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