How can I apply multiple filter to array

Question

I can just filter by input text that comes from "searchTerm" state. but I want to include "selectedOption" dropdown input to the filter. how can I use multiple filters for an array?

btw I'm using react-select for dropdown menu.

const Positions = ({ positions }: dataProps) => {

const options: any = [
  { value: "Canada", label: "Canada" },
  { value: "Italy", label: "Italy" },
];

const [selectedOption, setSelectedOption] = useState(null);

  const [searchTerm, setSearchTerm] = useState("");

  const filteredPositions = useMemo(() => {
    if (!searchTerm) return positions;
    return positions.filter(({ id, ...other }: any) => {
      const lowerCasedSearchTerm: string = searchTerm.toLowerCase();

      return Object.values(other)
        .map((v: any) => v.toLowerCase())
        .some((v: any) => v.includes(lowerCasedSearchTerm));
    });
  }, [searchTerm, positions]);

  return (

             <input
                  type="search"
                  placeholder="Search"
                  onChange={(e) => setSearchTerm(e.target.value)}
                />
              </div>
            <div className={styles.positions__item}>
              <Select
                defaultValue={selectedOption}
                onChange={setSelectedOption}
                options={options}
              />
              <Select
                defaultValue={selectedOption}
                onChange={setSelectedOption}
                options={options}
              />

   {filteredPositions?.map((position: any, index: any) => (
            <div key={position.position}>
              <SinglePosition
                category={position.category}
                type={position.type}
                position={position.position}
              />
            </div>
          ))}

You can do it like this some((v: any) => v.includes(lowerCasedSearchTerm) || v.includes(selectedOption)) — Charchit Kapoor
– Charchit Kapoor, Commented Jul 9, 2022 at 16:41
thank you but didn't work :( I tried with selectedOption.value still same. — Julia Schafer
– Julia Schafer, Commented Jul 9, 2022 at 16:47
Can you provide some sample input and output. It will be easier that way. — Charchit Kapoor
– Charchit Kapoor, Commented Jul 9, 2022 at 16:49

Mina · Accepted Answer · 2022-07-09 17:11:31Z

1

Check this please.

const filteredPositions = useMemo(() => {
if (!(searchTerm || selectedOption)) return positions;
return positions.filter(({ id, ...other }: any) => {
  const lowerCasedSearchTerm: string = searchTerm.toLowerCase();

  return Object.values(other)
    .map((v: any) => v.toLowerCase())
    .some((v: any) => v.includes(lowerCasedSearchTerm) || v.includes(selectedOption));
});
 }, [searchTerm, positions, selectedOption]);

edited Jul 9, 2022 at 17:11

answered Jul 9, 2022 at 17:03

Mina

17.8k3 gold badges24 silver badges39 bronze badges

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

5 Comments

Julia Schafer Over a year ago

thank you but didn't filter selectedoption :( just worked on search input.

Mina Over a year ago

Could you please, provide the code on a live editor like codesandbox, So we can debug. codesandbox.io/s/new

Julia Schafer Over a year ago

I put it on index.js and app.js files. data comes from sanity no problem with searchTerm but dropdown doesn't filter.

Mina Over a year ago

If you don't mind, let's have a meeting so, I can debug the code in your environment.

Julia Schafer Over a year ago

im not available right now. but thank you

Charchit Kapoor · Accepted Answer · 2022-07-09 17:18:30Z

0

Try this:

const filteredPositions = useMemo(() => {
    if (!searchTerm) return positions;
    return positions.filter(({ id, ...other }: any) => {
      const lowerCasedSearchTerm: string = searchTerm.toLowerCase();

      return Object.values(other)
        .map((v: any) => v.toLowerCase())
        .some((v: any) => v.includes(lowerCasedSearchTerm) || v.includes(selectedOption.value.toLowerCase()));
    });
  }, [searchTerm, positions]);

Since, we are converting everything into lowercase, we need to convert selected option as well.

answered Jul 9, 2022 at 17:18

Charchit Kapoor

9,3242 gold badges11 silver badges26 bronze badges

Collectives™ on Stack Overflow

How can I apply multiple filter to array

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related