How to reset the search results without using state?

[kabaskill]

Hello,
I am currently working on advanced filtering for the search results.

I have committed and pushed my current status. The PR is accessible at this link. The branch is called "advancedSearch".

The coach that reviewed the code left this comment:

const [filteredResults, setFilteredResults] = useState([]);

you don't need this state. Derived states can be computed as normal constants since if the filters change the entire component is executed again, and therefore any code that comes below the state statements. In this case it would be the chained .filter methods. this can look like this:

const [filters, setFilters] = useState(INITIAL_FILTERS);
const results = filterGames(data);

function filterGames(games) {
  const filteredForName = games.filter(game => game.startsWith(filters.name))
  const filteredForCategories = filteredForName.filter(game => ...)
  return // final results
}

My intention for using the state was to reset the filtered results when I close the filters after a search. How can I implement the logic on the quote and still be able to reset the results when the filter form is closed? I can't think of a way to do it without useState.

[F-Kirchhoff]

Hello Oguz,
your "results" array depends on the filters State. So when the filters are reset to default, your results will be recalculated automatically. The only issue that could arise is, that your filtering is not set up correctly. If the filters are empty you generally want to include all elements from the array, but when you check for example if the name includes the string "" then no game will pass. Therefore, you need to check first if the filters are empty and if so don't filter at all!

function filterGames(games) {
  const filteredForName = filters.name === "" ? games : games.filter(game => game.startsWith(filters.name))
  const filteredForCategories = filters.categories ===  '' ? filteredForName :  filteredForName.filter(game => ...)
  return // final results
}