117. Todo List

Build a Todo List component in React that allows users to add, remove, and toggle todo items.

1. Add Todo Items

• Input field to enter new todo text
• Button or Enter key to add todo
• Each todo should have a unique ID

2. Display Todos

• Show list of all todos
• Display todo text
• Show completion status (checked/unchecked)

3. Toggle Completion

• Click checkbox or todo item to toggle completion
• Visual indication of completed todos (strikethrough, different styling)

4. Remove Todos

• Delete button for each todo
• Remove todo from the list

5. Data Structure

interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

Examples

// Initial state
const todos = [
  { id: 1, text: 'Learn React', completed: false },
  { id: 2, text: 'Build Todo App', completed: true },
];