Home > Software engineering >  React. Filter the result upon click the checkbox input
React. Filter the result upon click the checkbox input

Time:08-08

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: Edit peaceful-zeh-1l8cee

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.

  • Related