React Js filter by Range with Radio Button

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>React Download JSON Data</title>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.14.7/babel.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;

function App() {
      // Sample list of items
      const items = [
        { id: 1, name: 'iPhone', price: 1100 },
        { id: 2, name: 'Laptop', price: 2200 },
        { id: 3, name: 'Desktop', price: 200 },
        { id: 4, name: 'Car', price: 40 },
        { id: 5, name: 'Smartwatch', price: 30 },
        { id: 6, name: 'Headphones', price: 100 },
        { id: 7, name: 'Tablet', price: 8 },
        { id: 8, name: 'Television', price: 35 },
        { id: 9, name: 'Bicycle', price: 5 },
        { id: 10, name: 'Gaming Console', price: 300 },
      ];

// State to track the selected filter range
      const [selectedRange, setSelectedRange] = useState('all'); // Default: Show all items

// Function to handle radio button change
      const handleRangeChange = (event) => {
        setSelectedRange(event.target.value);
      };

// Filter items based on the selected range
      const filteredItems = items.filter((item) => {
        if (selectedRange === 'all') {
          return true; // Show all items
        } else if (selectedRange === 'under20') {
          return item.price < 20; // Show items with price < 20
        } else if (selectedRange === '20to40') {
          return item.price >= 20 && item.price <= 40; // Show items with price between 20 and 40
        } else if (selectedRange === 'over40') {
          return item.price > 40; // Show items with price > 40
        } else if (selectedRange === 'cheap') {
          return item.price < 1000; // Show items with price < 1000
        } else if (selectedRange === 'expensive') {
          return item.price >= 1000; // Show items with price >= 1000
        } else {
          return false;
        }
      });

return (
        <div className='container'>
          <h2 className="title">React Js Filter by Range with Radio Button</h2>

{/* Radio buttons for filter range */}
          <div className="radio-button">
            <label>
              <input
                type="radio"
                value="all"
                checked={selectedRange === 'all'}
                onChange={handleRangeChange}
                className="radio-input"
              />
              All Items
            </label>
          </div>
          <div className="radio-button">
            <label>
              <input
                type="radio"
                value="under20"
                checked={selectedRange === 'under20'}
                onChange={handleRangeChange}
                className="radio-input"
              />
              Price Under $20
            </label>
          </div>
          <div className="radio-button">
            <label>
              <input
                type="radio"
                value="20to40"
                checked={selectedRange === '20to40'}
                onChange={handleRangeChange}
                className="radio-input"
              />
              Price $20 - $40
            </label>
          </div>
          <div className="radio-button">
            <label>
              <input
                type="radio"
                value="over40"
                checked={selectedRange === 'over40'}
                onChange={handleRangeChange}
                className="radio-input"
              />
              Price Over $40
            </label>
          </div>
          <div className="radio-button">
            <label>
              <input
                type="radio"
                value="cheap"
                checked={selectedRange === 'cheap'}
                onChange={handleRangeChange}
                className="radio-input"
              />
              Cheap Items (Under $1000)
            </label>
          </div>
          <div className="radio-button">
            <label>
              <input
                type="radio"
                value="expensive"
                checked={selectedRange === 'expensive'}
                onChange={handleRangeChange}
                className="radio-input"
              />
              Expensive Items ( $1000 and Above)
            </label>
          </div>

{/* Display filtered items */}
          <ul className="item-list">
            {filteredItems.map((item) => (
              <li key={item.id} className="item">
                {item.name} - ${item.price}
              </li>
            ))}
          </ul>
        </div>

);
    }

ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    .container {
      max-width: 400px;
      margin: 0 auto;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

.title {
      font-size: 28px;
      margin-bottom: 20px;
      color: #333;
    }

.radio-button {
      display: inline-block;
      margin-right: 20px;
      font-size: 18px;
      color: #555;
    }

.radio-input {
      margin-right: 5px;
    }

.radio-input:checked+label {
      font-weight: bold;
      color: #007bff;
    }

.item-list {
      list-style: none;
      padding: 0;
      margin-top: 20px;
    }

.item {
      font-size: 16px;
      margin: 10px 0;
      padding: 10px;
      background-color: #f7f7f7;
      border: 1px solid #ddd;
      border-radius: 5px;

display: flex;
      justify-content: space-between;
      align-items: center;
    }

.item::before {
      content: 'Item:';
      font-weight: bold;
    }

.item span {
      font-weight: bold;
      color: #333;
    }

/* Responsive adjustments */
    @media (max-width: 600px) {
      .radio-button {
        display: block;
        margin-bottom: 10px;
      }

.radio-button:last-child {
        margin-bottom: 0;
      }
    }
  </style>
</body>

</html>