#21Filter AND | OR
Overview
Filter a set of items by color, size, and shape using AND or OR logic, with 'all' as the default to ignore a filter.
Requirements
- Implement filtering logic so users can narrow down the list of items by
color,size, andshape. - Use a
Selectcomponent for each filter category (color, size, shape). - Use a
Switchcomponent to toggle between AND and OR filtering modes. - When using AND, an item must match all active filters to be shown.
- When using OR, an item can match any of the active filters to be shown.
- When a filter’s value is
"all", it should be ignored in the filtering logic. - Show only the filtered items in the list and update the total count accordingly.
- Implement a Clear button that resets all filters to
"all"and the filter type to"and".
Notes
- Build the filtering logic inside a helper function (e.g.,
filterItems) to keep the code organized. - The simplest way to handle multiple filters is to create a list of boolean checks for each active filter and combine them with
.every()for AND or.some()for OR. - Start with no filters active (
"all") so all items are displayed initially. - Remember to compute the unique
optionsfor eachSelectdynamically from theitemsarray. - Keep the UI responsive by using React’s state (
useState) to store both filters and the filter type. - The "Clear" button should reset both the filters and the toggle state to their defaults.
Tests
- filter by color with AND
- filter by color and size with AND
- filter by color, size, and shape with AND
- filter by color and size with OR
- filter by color, size, and shape with OR
- reset filters