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

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.