React Js Count Amount of Filtered Items

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="text/babel">
    const { useState } = React;
    function App() {
      // Step 1: Set up your data with categories (replace with your own dataset)
      const data = [
        { id: 1, name: 'Harvard University', category: 'College' },
        { id: 2, name: 'Stanford University', category: 'College' },
        { id: 3, name: 'Lincoln Elementary School', category: 'School' },
        { id: 4, name: 'Washington High School', category: 'School' },
        { id: 5, name: 'Yale University', category: 'College' },
        { id: 6, name: 'MIT', category: 'College' },
        { id: 7, name: 'Smith Elementary School', category: 'School' },
        { id: 8, name: 'Jefferson High School', category: 'School' },
        { id: 9, name: 'Princeton University', category: 'College' },
        { id: 10, name: 'UC Berkeley', category: 'College' },
        { id: 11, name: 'Johnson Middle School', category: 'School' },
        { id: 12, name: 'Madison Elementary School', category: 'School' },
        { id: 13, name: 'Columbia University', category: 'College' },
        { id: 14, name: 'Caltech', category: 'College' },
        { id: 15, name: 'Roosevelt High School', category: 'School' },
        { id: 16, name: 'Harvard Law School', category: 'College' },
        { id: 17, name: 'Oxford University', category: 'College' },
        { id: 18, name: 'Franklin Elementary School', category: 'School' },
        { id: 19, name: 'Lincoln High School', category: 'School' },

];

// Step 2: Create state variables
      const [selectedCategory, setSelectedCategory] = useState('All'); // Default to 'All' category
      const [filteredData, setFilteredData] = useState(data);

// Step 3: Filter the data based on category
      const filterData = () => {
        const filtered = data.filter((item) =>
          selectedCategory === 'All' || item.category === selectedCategory
        );

// Step 4: Update the state with filtered data
        setFilteredData(filtered);
      };

// Step 5: Display the count and category filter
      const filteredItemCount = filteredData.length;
      const totalItemCount = data.length;

return (
        <div className='container'>
          <h3>React Js Count Amount of Filtered Items</h3>
          <select
            className='category-select'
            value={selectedCategory}
            onChange={(e) => setSelectedCategory(e.target.value)}
          >
            <option value="All">All Categories</option>
            <option value="College">College</option>
            <option value="School">School</option>
            {/* Add more category options if needed */}
          </select>

<button className='filter-button' onClick={filterData}>
            Apply Filter
          </button>

<h3 className='filtered-items-count'>
            Filtered Items Count: {filteredItemCount}/{totalItemCount}
          </h3>

<ul className='filtered-data-list'>
            {filteredData.map((item) => (
              <li key={item.id} className='filtered-data-item'>
                {item.name} - {item.category}
              </li>
            ))}
          </ul>
        </div>

);
    }
    ReactDOM.render(<App />, document.getElementById("app"));
  </script>
  <style>
    * {
      box-sizing: border-box;
    }

.container {
      margin: 0 auto;
      width: 600px;
      text-align: center;
      background: #fff;
      border-radius: 5px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

/* Styles for the select element */
    .category-select {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }

/* Styles for the filter button */
    .filter-button {
      display: block;
      width: 100%;
      margin-top: 10px;
      padding: 10px;
      background-color: #007BFF;
      color: #fff;
      border: none;
      border-radius: 4px;
      font-size: 16px;
      cursor: pointer;
    }
    /* Styles for the filtered data list */
    .filtered-data-list {
      list-style: none;
      padding: 0;
      margin-top: 20px;
    }
    /* Styles for individual filtered data items */
    .filtered-data-item {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 16px;
    }
  </style>
</body>

</html>