Todo List

Build a Todo List as a single React component. The list owns its own state with useState, the input is controlled, and two user actions — Add and Delete — drive the array of tasks.

Task

You're given a starter App.tsx with the form, a pre-seeded <ul> of three tasks, and the Delete buttons wired into the markup. Make it work:

1. Render tasks from state. Lift the three pre-seeded tasks into useState<Task[]>. Map them in the <ul>, with a stable key on each <li>.
2. Add a task when the user submits the form. Read the input's value, trim it, ignore empty submissions, append to state, then clear the input.
3. Delete a task when the user clicks its Delete button. Remove that task from state.

Examples

• The page loads showing "Walk the dog", "Water the plants", "Wash the dishes". Typing "Buy milk" and pressing Enter appends a fourth row; the input clears.
• Clicking Delete next to "Water the plants" removes that row; the other two stay put.
• Submitting an empty input (or only spaces) does nothing — no row added, input stays as-is.

Notes

• Focus on functionality, not styling. The dark theme is wired in styles.css.
• The input should be controlled — value + onChange bound to state, not a ref poking the DOM. This is the React idiom and unlocks things like "disable Submit while empty" for free.
• Use a stable id as the key on each <li> (e.g. crypto.randomUUID()), not the array index. When the list mutates, index keys cause React to reuse the wrong DOM nodes.
• Never mutate state in place. tasks.push(...) does not re-render; return a new array with [...prev, newTask] or prev.filter(...).
• Bonus: event.preventDefault() in the onSubmit handler so the form doesn't trigger a page reload.

Starting point

Three files in the sandbox:

• App.tsx — the component you'll edit. Renders the form, three pre-seeded <li> rows, and Delete buttons. Replace the static markup with a state-driven render.
• index.tsx — bootstraps the React root with <StrictMode>. Don't edit.
• styles.css — dark-theme styling for the page, form, and list. Edit only if you want to tweak visuals.