How to filter an array with multiple values? | React

Question

Good evening,

I have a list / array of movies that I need to filter using two values (published and category). The current code allows a user to filter movies that has both values selected. However the problem I want to fix, is if;

A user select for example "Action", it should return all movies with category action.
Or another scenario where a user select "1999", show all movies published that year.
It shouldn't lose the current functionality either, as i want to allow user to filter both single values and combined.

Current code here: https://codesandbox.io/s/focused-sun-2lkfx?file=/src/App.js

I have seen examples for filtering a specific value, but in a scenario where user can specify something and add another filter to it, i don't know how to approach it.

MWO · Accepted Answer · 2021-12-18 22:18:35Z

2

You have messed something up in your useEffect, overwriting the result variable.

I have fixed it for you in a sandbox fork.

  useEffect(() => {
    //Filter options updated so apply all filters here
    const result = array
      .filter((item) =>
        filterCategory.length ? filterCategory.includes(item.category) : item
      )
      .filter((data) =>
        filterPublished.length ? filterPublished.includes(data.published) : data
      );

    setFilteredArray(result);
  }, [filterPublished, filterCategory]);

answered Dec 18, 2021 at 22:18

MWO

2,8462 gold badges12 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Narek Ghazaryan · Accepted Answer · 2021-12-18 21:37:26Z

1

Here is an example of how you should filter an array with 2 values.

I also forked the sandbox example. https://codesandbox.io/s/nifty-benji-p0n9m?file=/src/App.js

Now it should work as you expected.

movies.filter((movie) => {
  return (
    isDateSelected(movie, filterPublished) &&
    isCategorySelected(movie, filterCategory)
  );
});

edited Dec 18, 2021 at 21:37

answered Dec 18, 2021 at 21:28

Narek Ghazaryan

3,1731 gold badge11 silver badges12 bronze badges

Collectives™ on Stack Overflow

How to filter an array with multiple values? | React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related