React Challenge #21 - Filter 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.

Implement filtering logic so users can narrow down the list of items by color, size, and shape.
Use a Select component for each filter category (color, size, shape).
Use a Switch component 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".

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 options for each Select dynamically from the items array.
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.

Filter a set of items by color, size, and shape using AND or OR logic, with 'all' as the default to ignore a filter.

Implement filtering logic so users can narrow down the list of items by color, size, and shape.
Use a Select component for each filter category (color, size, shape).
Use a Switch component 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".

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 options for each Select dynamically from the items array.
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.