# Filter AND | OR

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

- Difficulty: intermediate
- Tags: useState
- Estimated time: 30 minutes
- Tests: 6
- Requires subscription: yes

## 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`, 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"`.


## 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 `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.


## Tests

01. filter by color with AND
02. filter by color and size with AND
03. filter by color, size, and shape with AND
04. filter by color and size with OR
05. filter by color, size, and shape with OR
06. reset filters