Lifting up filter logic

[SabinePfanner]

We've implement a FilterContainer including 3 different arrays of filter options to filter our list of crops. Currently the logic is implemented in the component: CardList.js including 3 states and 3 handle functions. For now everything works find and as planned.

BUT To avoid repetitive code logic, we thought it might be better to only have one state e.g.const [filter, setFilter] = useState([]) which includes on array of all selected filter options and only one handle function to set this state setFilter. Our idea was to handle the state on pages e.g. index.js where we want to use the filter but to keep the filter logic itself (filtering of the card list) within the component: CardList.js.

As we're struggling quite some time now with the refactoring we're currently wondering if handling the filters centrally is even possible and if yes, we would need some hint how to do it.

There is a test brand were you can check the current logic: https://github.com/SabinePfanner/plants-app/tree/test-sabine

[doemser]

Here is a small prototype on how you could go for this feature:

https://stackblitz.com/edit/vitejs-vite-um13ib?file=src%2FApp.jsx,src%2Fmain.jsx&terminal=dev

In your current code I see one major issue:

  let filteredPlants;

  filteredPlants = plants.filter(..);

  filteredPlants = filteredPlants.filter(..);

  filteredPlants = filteredPlants.filter(..);

you should write it like this, without mutating a let:

const filterForX = plants.filter(..);
const filterForY = filterForX.filter(..);
const filterForZ = filterForY.filter(..);

Also in your multiselects you are declaring styled components inside another component, you should avoid declaring components in components