title: How to apply filter in a list with Checkbox in ReactJS?
body: <p>I have a list that renders some products, these products are divided into some categories. Some products may have more than one category.</p>
  <p>I am trying to apply a filter with these categories through checkboxes. When the user checks the checkbox, the list must be updated with the selected category.</p>
  <p><a href="https://i.stack.imgur.com/y5eVR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y5eVR.png" alt="enter image description here" /></a></p>
  <p>I'm still a beginner in <code>Redux</code> and I don't know how to communicate between the components to update the list. I said communication between components because my list of categories is in the <code>Drawer</code> Component, and my list of products is in the <code>Card</code> component.</p>
  <p>I put my code into <a href="https://codesandbox.io/s/checkbox-filter-k69qu?file=/src/App.js" rel="nofollow noreferrer">codesandbox</a> because has a lot of files</p>
  <p>Here I'm rendering my list of products:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState, useMemo, useEffect } from 'react';
  import { useSelector } from 'react-redux';
  
  import CardItem from '../CardItem';
  import Pagination from '../Pagination';
  import Search from '../Search';
  import { useStyles } from './styles';
  
  const Card = (props) =&gt; {
    const { activeFilter } = props;
    const classes = useStyles();
    const data = useSelector((state) =&gt; state.perfume.collections);
    const [searchPerfume, setSearchPerfume] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const [perfumesPerPage, setPerfumesPerPage] = useState(3);
  
    console.log('activeFilter: ', activeFilter);
  
    const filteredPerfumes = useMemo(() =&gt; {
      return data.filter((perfume) =&gt;
        perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
      );
    }, [data, searchPerfume]);
  
    const currentPerfumes = filteredPerfumes.slice(
      (currentPage - 1) * perfumesPerPage,
      currentPage * perfumesPerPage
    );
    const pages = Math.ceil(filteredPerfumes.length / perfumesPerPage);
  
    useEffect(() =&gt; {
      if (currentPage &gt; pages) {
        setCurrentPage(1);
      }
    }, [currentPage, pages]);
  
    const pageNumbers = Array(pages)
      .fill(null)
      .map((val, index) =&gt; index + 1);
  
    const handleClick = (page) =&gt; {
      setCurrentPage(page);
    };
  
    return (
      &lt;div&gt;
        &lt;Search
          data-testid="input-filter-id"
          setSearchPerfume={setSearchPerfume}
        /&gt;
        {currentPerfumes
          .filter((perfume) =&gt; {
            return (
              perfume.name.toLowerCase().indexOf(searchPerfume.toLowerCase()) &gt;= 0
            );
          })
          .map((item) =&gt; (
            &lt;CardItem key={item.id} item={item} /&gt;
          ))}
        &lt;Pagination
          pageNumbers={pageNumbers}
          handleClick={handleClick}
          currentPage={currentPage}
        /&gt;
      &lt;/div&gt;
    );
  };
  
  export default Card;</code></pre>
  </div>
  </div>
  </p>
  <p>Here I'm rendering my list of categories:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Divider from '@material-ui/core/Divider';
  import List from '@material-ui/core/List';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemText from '@material-ui/core/ListItemText';
  import Checkbox from '@material-ui/core/Checkbox';
  import React, { useState } from 'react';
  import { useSelector } from 'react-redux';
  
  import { useStyles } from './styles';
  
  const DrawerComponent = (props) =&gt; {
    const { activeFilter, setActiveFilter } = props;
    const classes = useStyles();
    const data = useSelector((state) =&gt; state.perfume.collections);
  
    const handleChange = (text) =&gt; (event) =&gt; {
      setActiveFilter((prev) =&gt; ({
        ...prev,
        value: event.target.checked,
        text,
      }));
    };
  
    const allCategories = data
      .reduce((p, c) =&gt; [...p, ...c.categories], [])
      .filter((elem, index, self) =&gt; index === self.indexOf(elem));
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;div className={classes.toolbar} /&gt;
        &lt;Divider /&gt;
        &lt;List className={classes.list}&gt;
          {allCategories.sort().map((text, index) =&gt; (
            &lt;ListItem className={classes.itemList} button key={text}&gt;
              &lt;Checkbox onChange={handleChange(text)} /&gt;
              &lt;ListItemText primary={text} /&gt;
            &lt;/ListItem&gt;
          ))}
        &lt;/List&gt;
      &lt;/div&gt;
    );
  };
  
  export default DrawerComponent;</code></pre>
  </div>
  </div>
  </p>
  <p>Do you know how I can apply this filter to my list?</p>
  <p>Thank you very much in advance.</p>