> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/2-dynamic-list-of-items-with-strikethrough.md).

# 2 - Dynamic List of Items with Strikethrough

### **Description**

Create a React application that displays a dynamic list of items. Each item in the list should have a checkbox that, when clicked, adds a strikethrough to the item's text, indicating it as completed.

### **Algorithm**

1. Initialize a state variable to store the list of items, with each item having a `text` and a `completed` property.
2. Render a list of items from the state variable.
3. Create a checkbox for each item that toggles the `completed` property when clicked.
4. Use CSS to add a strikethrough to items with the `completed` property set to `true`.

### **Classes**

`TodoList`: A React component that manages the list of items and renders the list.

### **Code**

```javascript
import React, { useState } from 'react';

function TodoList() {
  const [items, setItems] = useState([
    { text: 'Item 1', completed: false },
    { text: 'Item 2', completed: false },
    { text: 'Item 3', completed: false },
  ]);

  const handleToggleCompleted = (index) => {
    setItems(
      items.map((item, i) =>
        i === index ? { ...item, completed: !item.completed } : item
      )
    );
  };

  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>
          <input
            type="checkbox"
            checked={item.completed}
            onChange={() => handleToggleCompleted(index)}
          />
          <span style={{ textDecoration: item.completed ? 'line-through' : 'none' }}>
            {item.text}
          </span>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;
```

### **Explanation**

The code defines a `TodoList` component that utilizes the `useState` hook to initialize a list of items. Each item has a `text` and a `completed` property. The component renders a list of items, with each item having a checkbox that toggles the `completed` property when clicked. CSS is used to add a strikethrough to items with the `completed` property set to `true`.

### Possible Future Enhancements

* Add functionality to add and remove items from the list.
* Implement a filter to show only completed or uncompleted items.
* Use a more advanced CSS technique to animate the strikethrough effect.
* Integrate with a backend service to persist the list of items.