Filter from key value objects in reactjs

Question

I am creating searchbar to filter key value data objects. I am getting filter is not a function error while doing search. Is there any other function to filter in key value pair objects ?

Data :-

{
  meta_city : {
    label: "City"
    values: (5) ["DL", "KA", "GJ", "MH", "UP"]
   },
  meta_country : {
    label: "Country"
    values: (5) ["IN", "US", "CA"]
   }
}

Handle search (filterData data is local state) :-

const handleSearchFilter = (event) => {
    const searchWord = event.target.value;
    const newFilter = Object.keys(filterData).map((key) => {
      filterData[key].filter((value) => {
        return value.includes(searchWord);
      });
    });
    setFilterData(newFilter);
  };

<div className="mp-input-field-container">
     <input
       className="mp-input"
       placeholder="Search"
       onChange={handleSearchFilter}                    
     />
</div>

Answer 1

You should use reduce like this:

const handleSearchFilter = (event) => {
  const searchWord = event.target.value;
  const newFilter = Object.keys(filterData).reduce((result, key) => {
    if (filterData[key].values.includes(searchWord)) {
      result.push(filterData[key]);
    };
    return result;
  }, []);
  setFilterData(newFilter);
};

In this example I'm returning an array result. you can return an object if you want.