Декомпозиция фильтра товаров

В этом решении мы разбиваем приложение фильтрации товаров на независимые компоненты для каждого элемента управления.

Компонент поля поиска

function SearchInput({ value, onChange }) {
    return (
        <input
            type="text"
            placeholder="Поиск товаров..."
            value={value}
            onChange={(e) => onChange(e.target.value)}
        />
    );
}

SearchInput - это простой обёрнутый input. Мы выделили его отдельно, чтобы изолировать детали - placeholder, тип поля. Компонент извлекает значение из события e.target.value и передаёт его в функцию onChange. Это упрощает использование - родитель просто передаёт функцию setSearch, не думая о структуре события.

Компонент селектора категории

function CategorySelect({ value, onChange }) {
    return (
        <select
            value=

CategorySelect инкапсулирует выпадающий список категорий. Мы вынесли его отдельно, потому что список категорий - это отдельная сущность со своими опциями. В будущем категории можно сделать динамическими, передавая массив через props, и компонент будет генерировать <option> автоматически.

Компонент чекбокса наличия

function InStockCheckbox({ checked, onChange }) {
    return (
        <label>
            <input

InStockCheckbox объединяет чекбокс и метку в один компонент. Обратите внимание на e.target.checked вместо e.target.value - для чекбоксов нужно читать свойство checked, которое возвращает булево значение. Компонент скрывает эту особенность от родителя - он просто получает true или false.

Контейнер фильтров

function Filters({ search, setSearch, category, setCategory, inStockOnly, setInStockOnly }) {
    return

Filters собирает все элементы управления фильтрацией в одном месте. Мы создали этот контейнер, чтобы сгруппировать связанные элементы. Компонент принимает все значения и сеттеры, и передаёт их дальше в дочерние компоненты. Это промежуточный слой, который организует структуру панели фильтров.

Передача функций setState напрямую

<SearchInput
    value={search}
    onChange={setSearch}
/>

Мы передаём setSearch напрямую в prop onChange. Это работает, потому что SearchInput вызывает onChange(e.target.value) - то есть передаёт строку. А setSearch принимает строку. Сигнатуры совпадают, обёртка не нужна. Это делает код компактнее, чем onChange={(value) => setSearch(value)}.

Компонент карточки товара

function ProductItem({ product }) {
    return (
        <div className="product-item"

ProductItem отображает информацию об одном товаре. Мы выделили карточку в компонент, потому что каждый товар имеет одинаковую структуру отображения. Условный класс product.inStock ? 'in-stock' : 'out-of-stock' и текст зависят от наличия товара. Это делает карточку самодостаточной - она знает, как отобразить товар полностью.

Компонент сетки товаров

function ProductGrid({ products }) {
    return (
        <div className="product-grid">

ProductGrid отвечает за отображение списка товаров. Мы выделили сетку отдельно, чтобы изолировать логику списка от логики одной карточки. Компонент просто проходит по массиву и создаёт ProductItem для каждого элемента. В будущем здесь может появиться пагинация, сортировка или сообщение "Ничего не найдено".

Логика фильтрации в App

const filteredProducts = products.filter((product) => {
    return (
        product.name.toLowerCase().

Вся логика фильтрации остаётся в App. Это бизнес-логика приложения - как именно фильтровать товары. Компоненты Filters и ProductGrid не знают про эту логику - они только отображают интерфейс и получают результаты. Три условия объединены через && - товар должен соответствовать всем фильтрам одновременно.

Фильтрация по тексту

product.name.toLowerCase().includes(search.toLowerCase())

Приводим название товара и поисковый запрос к нижнему регистру, чтобы поиск был регистронезависимым. Метод includes проверяет, содержится ли подстрока в строке. Если search пустая строка, includes('') всегда возвращает true - все товары проходят этот фильтр.

Фильтрация по категории

(category === 'Все' || product.category === category)

Если выбрана категория "Все", пропускаем все товары. Иначе проверяем точное совпадение категории товара с выбранной. Оператор || (ИЛИ) означает, что достаточно одного истинного условия.

Фильтрация по наличию

(!inStockOnly || product.inStock)

Если чекбокс не отмечен (inStockOnly === false), то !inStockOnly === true, и фильтр пропускает все товары. Если чекбокс отмечен, проверяем product.inStock. Это компактная запись для "если фильтр не активен ИЛИ товар в наличии".

Вычисляемое значение

const filteredProducts = products.filter(...);

filteredProducts - это не состояние, а вычисляемое значение. Оно пересчитывается при каждом рендере на основе products, search, category и inStockOnly. Когда любой из этих параметров меняется, React перерисовывает компонент, и фильтрация выполняется заново. Не нужно синхронизировать отдельное состояние для отфильтрованных товаров.

Композиция в App

return (
    <div className="product-filter">
        <Filters
            search={

Компонент App максимально простой - панель фильтров сверху, сетка товаров снизу. Всё состояние и логика находятся здесь, а визуальные компоненты получают только необходимые данные. Filters управляет параметрами фильтрации, ProductGrid показывает результат. Они независимы друг от друга и связаны только через App.