Filter array of object based on multiple conditions in React

Question

I wanna filter person list according to city job age gender how can I filter based on five conditions in react, I used filter chaning but it did not work for me .in useEffect hook I filter individual condition and then i used chaning filter but it seems I should respectively filtered

briefly i wanna filtered persons according to five conditions to handle this scenario I used useEffect hook and I used filter method to each condition but I don't know how they can work together

  const [persons, setPersons] = useState([
    {
      id: 1,
      name: "mosh",
      gender: "0",
      city: "London",
      category: "frontend",
      age: 27,
    },
    {
      id: 2,
      name: "saheb",
      gender: "1",
      city: "Paris",
      category: "backend",
      age: 32,
    },
    {
      id: 3,
      name: "vahid",
      gender: "0",
      city: "Rome",
      category: "frontend",
      age: 43,
    },
    {
      id: 4,
      name: "kianosh",
      gender: "1",
      city: "London",
      category: "designer",
      age: 29,
    },
    {
      id: 5,
      name: "milad",
      gender: "0",
      city: "Paris",
      category: "designer",
      age: 41,
    },
    {
      id: 6,
      name: "parviz",
      gender: "1",
      city: "Rome",
      category: "designer",
      age: 56,
    },
    {
      id: 7,
      name: "farid",
      gender: "0",
      city: "London",
      category: "frontend",
      age: 37,
    },
    {
      id: 8,
      name: "rezgar",
      gender: "1",
      city: "Rome",
      category: "backend",
      age: 29,
    },
    {
      id: 9,
      name: "ali",
      gender: "0",
      city: "Paris",
      category: "backend",
      age: 48,
    },
  ]);
  const [filteredPersons, setFilteredPersons] = useState([]);
  const [checkedValue, setCheckedValue] = useState([]);
  const [select, setSelect] = useState("all");
  const [gender, setGender] = useState("");
  const [range, setRange] = useState(100);
  const [max, setMax] = useState(null);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const maximum = Math.max(...persons.map((item) => item.age));
    setMax(maximum);
  }, []);

  useEffect(() => {
    console.log("useeffect runs");
    const oldPersons = [...persons];
    const filteredCity = (person) => {
      if (checkedValue.includes(person.city)) {
        return person;
      }
      return null;
    };
    const filteredAge = (person) => {
      return person.age < range;
    };
    const filteredGender = (person) => {
      return person.gender == gender;
    };
    const filteredSelect = (person) => {
      if (select === "all") {
        return person;
      } else {
        return person.category == select;
      }
    };

    const filteredAllPersons = oldPersons
      .filter(filteredGender)
      .filter(filteredAge)
      .filter(filteredSelect)
      ?.filter(filteredCity)
    setFilteredPersons(filteredAllPersons);
  }, [checkedValue, select, gender, range, search]);

What do you mean it didn't work for you? What do you expect to happen and what happens instead? — Mario Nikolaus
– Mario Nikolaus, Commented Nov 2, 2021 at 22:51
when i checked city and console loged filteredAllPersons that give me empty array and I don't know how filter persons according to these conditions such as city and job and gender — Adib Sadeghi
– Adib Sadeghi, Commented Nov 3, 2021 at 9:06

Mario Nikolaus · Accepted Answer · 2021-11-03 09:42:30Z

5

The issue is that you are applying all of your filters instead of just ones that are defined. And also you also should just return false from your filters if they are defined, that is the only way to run through all of them. So your code should look something like this

const filteredAllPersons = oldPersons.filter(person => {
  if (genderFilter && person.gender !== genderFilter) {
    return false
  }
  // apply all other filters the same as above

  // Finally return true because record has satisfied all conditions
  return true
})

answered Nov 3, 2021 at 9:42

Mario Nikolaus

2,4061 gold badge23 silver badges29 bronze badges

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

2 Comments

Mario Nikolaus Over a year ago

@AdibSadeghi this one or the one you selected as correct answer(from Javad)

Adib Sadeghi Over a year ago

your answer is correct i selected your answer

Javad Masoudian · Accepted Answer · 2021-11-03 11:31:47Z

3

You can only handle it through one filter() method

useEffect(() => {
    const oldPersons = [...persons];

    const filteredAllPersons = oldPersons.filter(person => {
        if(!checkedValue.includes(person.city)) return false;

        if(person.age >= range) return false;

        if(person.gender !== gender) return false;

        if (select === "all") return person;

        return person.category === select;
    })

    setFilteredPersons(filteredAllPersons);
}, [persons, checkedValue, select, gender, range]);

in return

return filteredPersons.length > 0 && <div>{console.log(filteredPersons)}</div>

edited Nov 3, 2021 at 11:31

answered Nov 2, 2021 at 23:09

Javad Masoudian

621 silver badge3 bronze badges

2 Comments

Adib Sadeghi Over a year ago

thanks javad for your answer but for the first time when I console log filtered persons that give me empty array

Javad Masoudian Over a year ago

You're welcome, so you need to wait for setting state through handling empty state, I updated my answer

Collectives™ on Stack Overflow

Filter array of object based on multiple conditions in React

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related