2 - Dynamic List of Items with Strikethrough

Description

This puzzle requires you to build a React application that displays a dynamic list of items. Each item should have its own text and the ability to be crossed out through a strike-through effect when clicked. Users should be able to add new items to the list and clear all existing items at once.

Algorithm

1. State Management: Utilize React's useState hook to manage two state variables:

   • items: An array containing objects representing each list item with properties like text and isStrikedThrough flag.

   • newText: A string representing the text of the new item to be added.

2. Adding Items: Define a function that takes the newText as input and updates the items state with a new object containing the new text and an initial isStrikedThrough value of false.

3. Striking Through Items: Define a function that takes the index of the clicked item as input and updates the isStrikedThrough property of the corresponding item in the items state to true.

4. Clearing All Items: Define a function that resets the items state to an empty array.

5. Conditional Rendering: Based on the isStrikedThrough value of each item, apply the styling for strikethrough text (e.g., text-decoration: line-through) when rendering the list items.

Code

DynamicListApp.ts

import React, { useState } from 'react';

function DynamicListApp() {
  const [items, setItems] = useState([]);
  const [newText, setNewText] = useState('');

  const handleAddItem = () => {
    if (newText) {
      setItems([...items, { text: newText, isStrikedThrough: false }]);
      setNewText('');
    }
  };

  const handleStrikeThrough = (index) => {
    const updatedItems = [...items];
    updatedItems[index].isStrikedThrough = !updatedItems[index].isStrikedThrough;
    setItems(updatedItems);
  };

  const handleClearAll = () => {
    setItems([]);
  };

  return (
    <div className="dynamic-list-app">
      <h1>Dynamic List</h1>
      <input
        type="text"
        placeholder="Enter new item"
        value={newText}
        onChange={(e) => setNewText(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <button onClick={handleClearAll}>Clear All</button>
      <ul>
        {items.map((item, index) => (
          <li
            key={index}
            className={item.isStrikedThrough ? 'striked-through' : ''}
            onClick={() => handleStrikeThrough(index)}
          >
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default DynamicListApp;

Explanation

• useState Hooks: Two state variables, items and newText, are used to manage the list items and the text for the new item.

• Adding Items: The handleAddItem function is triggered when the "Add Item" button is clicked. It checks if newText is not empty, and if so, creates a new object with the text and adds it to the items state using the spread operator.

• Striking Through Items: The handleStrikeThrough function accepts the index of the clicked item. It creates a copy of the items array, flips the isStrikedThrough flag of the clicked item, and sets the state with the updated array.

• Clearing All Items: The handleClearAll function simply resets the items state to an empty array.

• Conditional Rendering: The map function iterates over the items array and applies the striked-through class to list items with the isStrikedThrough flag set to true.

Additional Notes

• This code provides a basic implementation of the dynamic list functionality. You can further enhance it by adding features like:

  • Persisting the list data in local storage to survive reloads.

  • Prioritizing or reordering list items.

  • Implementing different styles for struck-through items.