This is my first time here. So i plan to filter the result (remove item that stocked=false / item with red name) upon click the checkbox input.
i have try filter it in the const filter by checking the toggle is true and false but failed.
Additionally i hope to shorten my code while make it easier to read and understand as i am still new to this. Thanks in advance. i got the project from react-beta btw but i dont want to follow the code cause i dont understand it. This is the link:
UPD: Clarifications
Basically the idea is to have 1 items
array as a state variable that holds the data loaded.
Next - state variable filterObject
, just to keep everything search-related in 1 object.
Next - the filteredItems
that are returned by useMemo hook which runs the function passed to it when anything in the depsArray
, [items, filterObject]
in our case is changed. It just watch for changes of items
and filterObject
and filters items based on what is in filterObject
and returns array that match all the criterias.
Next - 2 useMemo hooks for fruits and vegetables, they just take the filtered array and apply 1 more filter by category
, now you have 1 full array items
with everything, 1 filteredItems
, and 2 separate collections of fruits and vegetables, which are extracted from filteredItems
.
Now just render them, and bind your inputs
to change filterObject
state.