React Js Count Amount of Filtered Items

    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' },

       ];

​

      // 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>