javascript - How to filter my search results by location and how to rerender?

Question

I am currently rendering user's search results in my component and those results are being stored in a state called

const [searchData, setSearchData] = useState<any>([]); 

However I've added a left navbar that user can search by location, date posted, etc.... I've managed to get the list of cities(location) of the search results on the left navbar, and if user wanted to click each city I wanted to change the search results filtering only by that city.

I so far have been able to get the console.log(location) of each onClick so now I am stuck how I should re render the results. If I update setSearchData with this onClick handle. I get an undefined .map error of other functions in this component.

So.. How am I suppose to handle re-rendering search results based on clicking location filter?

Answer 1

Please try doing this:

const [searchData, setSearchData] = useState<any>({data: [], save: []}); 

const onChange = (value: string) => {
   setSearchData({
       ...searchData,
       save: searchData.data.filter((x) x.name.indexOf(value) > -1)
   })
}

const state = ["Fish","Dog","Cat"]

const data = state.filter((x) => x.indexOf("Fish") > -1)
console.log(data)