React Js Filter by Checkbox

React Js Filter by Checkbox:React.js allows you to implement a filter feature using checkboxes in just a few steps. First, create a component that renders a list of items and checkboxes for filtering. Each checkbox represents a category or attribute. When a checkbox is clicked, use state management (typically with React's useState hook) to track the selected checkboxes. Then, apply a filter function to the list of items, displaying only those that match the selected checkboxes' criteria. This interactive approach allows users to dynamically filter content based on their preferences, enhancing the user experience and making the application more versatile and user-friendly

written

reviewed

updated

How do I use checkboxes for filtering in Reactjs?

This React.js code snippet demonstrates a checkbox-based filter for a list of items. It initializes an array of data containing items with titles and categories. Using React's useState hook, it manages the selected checkbox options and updates them when checkboxes are clicked. The handleCheckboxChange function toggles the selected options based on user input.

The filteredData variable filters the original data based on the selected checkbox options, displaying items that match the selected categories. The UI presents checkboxes for different categories, and the list dynamically updates based on the user's selections.

This code provides a simple example of how to implement a filter feature in a React application using checkboxes and state management.

React Js Filter by Checkbox Example

  <script type="text/babel">
    const { useState } = React;

    function App() {
      const data = [
        { id: 1, title: 'The Shawshank Redemption', category: 'Movie' },
        { id: 2, title: 'Bohemian Rhapsody', category: 'Song' },
        { id: 3, title: 'Inception', category: 'Movie' },
        { id: 4, title: 'Stranger Things', category: 'Webseries' },
        { id: 20, title: 'The Lord of the Rings', category: 'Movie' }
      ];

      const [selectedOptions, setSelectedOptions] = useState([]);

      const handleCheckboxChange = (e) => {
        const value = e.target.value;
        setSelectedOptions((prevSelected) => {
          if (prevSelected.includes(value)) {
            return prevSelected.filter((option) => option !== value);
          } else {
            return [...prevSelected, value];
          }
        });
      };

      const filteredData = data.filter((item) => {
        if (selectedOptions.length === 0) {
          return true;
        } else {
          return selectedOptions.includes(item.category);
        }
      });

      return (
        <div className='container'>
          <h3 className='title'>React Checkbox Filter Example</h3>
          <div className='checkbox-group'>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="Movie"
                checked={selectedOptions.includes('Movie')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              Movie
            </label>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="Song"
                checked={selectedOptions.includes('Song')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              Song
            </label>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="TV Series"
                checked={selectedOptions.includes('TV Series')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              TV Series
            </label>
            <label className='checkbox-label'>
              <input
                type="checkbox"
                value="Webseries"
                checked={selectedOptions.includes('Webseries')}
                onChange={handleCheckboxChange}
                className='checkbox-input'
              />
              Webseries
            </label>
          </div>
          <ul>
            {filteredData.map((item) => (
              <li key={item.id} className='list-item'>
                {item.id} {item.title}
              </li>
            ))}
          </ul>
        </div>

      );
    }

    ReactDOM.render(<App />, document.getElementById("app"));
  </script>

Run

Output of React Js Filter by Checkbox

Pasted Image

React JS Tutorial

React Js Filter by Checkbox

Feedback for Abhishek

How do I use checkboxes for filtering in Reactjs?

React Js Filter by Checkbox Example

Output of React Js Filter by Checkbox