How can I multiple filter array in React

Question

I can only filter with search text input. but I want to use 2 select dropdown + text input while filtering the array. how can I include dropdowns into the filter?

basically, when the user selects location and search something, I just wan't to show results from that selected location. thank you for your help!

import Select from "react-select";

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

  const locations: any = [
    { value: "canada", label: "Canada" },
    { value: "italy", label: "Italy" },
    { value: "france", label: "France" },
  ];

  const jobs: any = [
    { value: "uidesigner", label: "UI Designer" },
    { value: "back-end", label: "Backend Developer" },
    { value: "frontend", label: "Frontend Developer" },
  ];

  const [selectLocation, setSelectLocation] = useState<any>("");
  const [selectJobType, setSelectJobType] = useState<any>("");
  const [searchTerm, setSearchTerm] = useState<any>("");

  return (   
                  <input
                    type="search"
                    placeholder="Search"
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
      
                <Select
                  defaultValue={selectLocation}
                  onChange={setSelectLocation}
                  options={locations}
                  instanceId={"1"}
                  placeholder="Location"
                />
              </div>

         
                <Select
                  defaultValue={selectJobType}
                  onChange={setSelectJobType}
                  options={jobs}
                  placeholder="Job Type"
                  instanceId={"2"}
                />
   
            {positions?.map((position: any) => (
              <SinglePosition
                category={position.category}
                type={position.type}
                location={position.location}
                position={position.position}
                key={position._id}
              />
            ))}

Carlos Filipe Braz · Accepted Answer · 2022-07-10 21:53:03Z

1

You can have a "list" for the result of filtering the "positions" like this:

const [searchTerm, setSearchTerm] = useState<any>("");
const [filtered, setFiltered] = useState<any[]>([]);

then a "useEffect" to change this list every time you change one of the search inputs from the original list:

React.useEffect(() => {
  if(positions.length > 0) {
     let newList = [...positions];
     if(searchTerm) {
        newList = newList.filter(i => i.XXX === searchTerm);
     }
     if(selectJobType) {
        newList = newList.filter(i => i.XXX === selectJobType);
     }
     if(selectPosition) {
        newList = newList.filter(i => i.XXX === selectPosition);
     }
     setFiltered(newList);
  }
}, [positions, searchTerm, selectJobType, selectPosition]);

Then use this "filtered" list to map in your "SinglePosition" instead of "postions"

answered Jul 10, 2022 at 21:53

Carlos Filipe Braz

811 silver badge2 bronze badges

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

2 Comments

Elena Barden Over a year ago

thank you! but can I show results while typing search input? like I have to type Back-End Developer to get results but can I show it by just typing "back"

Carlos Filipe Braz Over a year ago

You can filter as you want, you only need to adjust the right precicate inside each "filter" (I am not sure if I got what you wrote, but maybe compare after to lowercase both strings will be enough). If you want to filter while typing considerer to look for debounce the function to change the filtered list.

Collectives™ on Stack Overflow

How can I multiple filter array in React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related