How to apply filter in a list with Checkbox in ReactJS?

State Contol

Generally when you need to communicate between components, the solution is Lifting State Up. Meaning that the state should be controlled by a common ancestor.

Instead of having this in your DrawerComponent:

const [activeFilter, setActiveFilter] = React.useState([]);

Move that hook up to your PerfumeStore and pass activeFilter and setActiveFilter as props to DrawerComponent.

You need to add an onChange function to the Checkbox components in DrawerComponent which adds or removes the category by calling setActiveFilter.

So now you need to apply the activeFilter to your list of perfumes, which is determined in Card. You could move all of that filtering up to PerfumeStore, but to keep it simple let's pass activeFilter down as a prop to Card (it just needs to read but not write the filter, so we don't pass down setActiveFilter). Now the Card component has the information that it needs to filter the items based on the selected categories.

Redux Selectors

Everything so far has just had to do with react and the fact that you are using redux hasn't come into play at all. The way that you would incorporate redux principles, if you wanted to, is do define some of the filtering and mapping logic outside of your components as selector functions of state and other arguments. Then instead of calling useSelector to get a huge chunk of state which you process inside the component, you can call useSelector with a selector that gets just the data which you need.

An obvious place to do this is in DrawerComponent, where you are getting the category list. Make a selector function getPerfumeCategories which takes the state and returns the categories. Then in your component, you call const allCategories = useSelector(getPerfumeCategories);

Now all that this component is responsible for is rendering the categories. It is no longer responsible for storing the selections (we've already moved the useState out) or for finding the categories from the state. This is good! You can read up on principles like the Single Responsibility Principle, Separation of Concerns, Logic vs. Presentation components, etc. if you want a deeper understanding of why this is good.

In Card you could use a selector that gets an already-filtered list of perfumes. But in this case a getCurrentPagePerfumes function would take a lot of different arguments so it's kind of messy.

Edit: Filtering

You've asked for help with how to apply the value of activeFilter to filter the perfumes which are shown in your list.

Multiple categories can be selected at once, so activeFilter needs to identify all of the actively selected categories. I first suggested an array of names, but removing items from an array (without mutation) is more complicated than assigning values to objects.

So then I thought about having an object where the keys are the category names and the values are a boolean true/false of whether the category is checked. This makes handleChange really simple because we can update the value for that key to the value of event.target.checked.

  const handleChange = (text) => (event) => {
    setActiveFilter((prev) => ({
      ...prev,
      [text]: event.target.checked,
    }));
  };

• ...prev says "keep everything the same except the key that I am changing".
• [text] says "the key I am updating is the variable text, not the literal key 'text'"
• event.target.checked is the boolean of whether this category is checked.

We could set an initial state for activeFilter which includes a key for every category and all the values are false (ie. nothing selected). Or we could allow for the object to be incomplete with the assumption that if it key isn't included, then it isn't checked. Let's do that.

So now our activeFilter looks something like: {Floral: true, Floriental: false, Fresh: true} where some are true, some are false, and lots are missing and therefore assumed to be false.

We need to figure out how to filter the displayed perfumes based on the value of activeFilter. Let's start by writing a function that determines whether one perfume is eligible to be shown, and then we can use that as a callback of array.filter() on an array of perfumes. We want a perfume to be included if any of its categories are checked (unless you want it to match all the checked categories?). That looks like:

    perfume.categories.some( 
      category => activeFilter[category] === true
    );

Where .some() loops through the categories and returns true if our callback is true for any category.

I added this to your filteredPerfumes memo and added activeFilter as a dependency so that it will re-filter when the checkboxes change.

  const filteredPerfumes = useMemo(() => {
    return data.filter((perfume) =>
      perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
      && perfume.categories.some( 
        category => activeFilter[category] === true
      )
    );
  }, [data, searchPerfume, activeFilter]);

That works, except that nothing shows when no categories are checked -- whoops! So we want to add a special case that says "all perfumes pass the category filter if no categories are checked." To do that, we need to know if there are checked categories or not. There's a lot of ways to do that, but here's one:

const hasCategoryFilter = Object.values(activeFilter).includes(true);

We look at all of the values in the activeFilter object and see if it includes any which are true.

Now we need to use this value to only filter based on categories when it's true. I'll pull our previous logic into a function and add an if statement (note: the boolean operator || is shorter to use, but I think the if is more readable).

    const matchesCategories = (perfume) => {
      if ( hasCategoryFilter ) {
        return perfume.categories.some( 
          category => activeFilter[category] === true
        );
      } else return true;
    }

Sidenote: we have two independent filters, one for search and one for category, so we could call data.filter once and check for both conditions at once or twice and check each condition separately. It does not matter which you do.

The final filter is:

  const filteredPerfumes = useMemo(() => {
    const hasCategoryFilter = Object.values(activeFilter).includes(true);

    const matchesCategories = (perfume) => {
      if ( hasCategoryFilter ) {
        return perfume.categories.some( 
          category => activeFilter[category] === true
        );
      } else return true;
    }

    return data.filter((perfume) =>
      perfume.name.toLowerCase().includes(searchPerfume.toLowerCase())
    ).filter( matchesCategories );
    
  }, [data, searchPerfume, activeFilter]);

Updated Sandbox