Корзина покупок

В этом решении мы создаём полнофункциональную корзину интернет-магазина с добавлением, изменением количества и подсчётом итоговой суммы.

Состояние корзины

const [cart, setCart] = useState([]);

Корзина - это массив товаров. Каждый элемент содержит все поля оригинального товара плюс дополнительное поле quantity (количество). Начальное значение - пустой массив, потому что корзина изначально пуста.

Поиск товара в корзине

const existingItem = cart.find(item => item.id === product.id);

Метод find ищет первый элемент, для которого функция вернула true. Мы проверяем совпадение по id - уникальному идентификатору товара. Если товар найден, existingItem содержит этот объект. Если не найден - undefined. Это позволяет определить, добавлять новый товар или увеличивать количество существующего.

Условное добавление товара

if (existingItem) {
    setCart(cart.map(item =>
        item.id === product.id
            ?

Если товар уже в корзине, мы создаём новый массив с помощью map, увеличивая quantity только для нужного товара. Если товара нет, добавляем его в конец массива через spread оператор [...cart, newItem]. Оператор ...product копирует все поля товара, а затем мы добавляем quantity: 1.

Обновление количества с map

const incrementQuantity = (productId) => {
    setCart(cart.map(item =>
        item.id ===

Метод map создаёт новый массив. Для товара с нужным id мы создаём новый объект - копируем все поля через ...item и перезаписываем quantity. Для остальных товаров возвращаем их без изменений. React видит, что массив новый, и перерисовывает компонент. Важно не мутировать оригинальный массив - это нарушает правила React.

Минимальное значение количества

const decrementQuantity = (productId) => {
    setCart(cart.map(item =>
        item.id ===

Math.max(1, item.quantity - 1) выбирает большее из двух значений. Если quantity равно 2, 2 - 1 = 1, и Math.max(1, 1) = 1. Если quantity равно 1, 1 - 1 = 0, но Math.max(1, 0) = 1. Это гарантирует, что количество никогда не станет меньше 1. Для полного удаления используется отдельная кнопка.

Удаление товара

const removeFromCart = (productId) => {
    setCart(cart.filter(item => item.id !== productId)

Метод filter создаёт новый массив, содержащий только элементы, для которых функция вернула true. Условие item.id !== productId означает "все товары, кроме удаляемого". Товар с нужным id не попадёт в новый массив - он удалён.

Подсчёт общего количества товаров

const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);

Метод reduce агрегирует массив в одно значение. Он принимает функцию и начальное значение аккумулятора (0). Функция получает аккумулятор sum и текущий элемент item, возвращает новое значение аккумулятора. Для каждого товара мы добавляем его quantity к общей сумме. Если в корзине 2 ноутбука и 3 мыши, результат будет 5.

Подсчёт суммы заказа

const subtotal = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);

Здесь reduce суммирует стоимость всех товаров. Для каждого товара мы умножаем цену на количество и добавляем к общей сумме. Например, 2 товара по 1000₽ и 1 товар по 500₽ дадут (1000 * 2) + (500 * 1) = 2500₽. Это промежуточная сумма без доставки.

Условная стоимость доставки

const shipping = cart.length > 0 ? 500 : 0;

Доставка стоит 500₽, только если в корзине есть товары. Проверка cart.length > 0 возвращает true для непустой корзины. Тернарный оператор выбирает 500 или 0. Это предотвращает показ стоимости доставки для пустой корзины.

Итоговая сумма

const total = subtotal + shipping;

Простое сложение суммы товаров и доставки. Все вычисления totalItems, subtotal, shipping и total - это не состояния, а вычисляемые значения. Они автоматически пересчитываются при каждом рендере, когда меняется cart.

Очистка корзины

const clearCart = () => {
    setCart([]);
};

Функция устанавливает корзину в пустой массив. Мы вызываем её после оформления заказа, чтобы пользователь мог начать новые покупки с чистой корзины.

Копирование объекта товара

setCart([...cart, { ...product, quantity: 1 }]);

Двойное использование spread оператора. Внешний ...cart разворачивает существующие элементы корзины. Внутренний ...product копирует все поля товара из каталога. Затем мы добавляем новое поле quantity: 1. Без копирования мы бы мутировали оригинальный объект товара из PRODUCTS, что могло бы вызвать баги.

Условный рендеринг корзины

{cart.length === 0 ? (
    <div className="cart-empty">
        <div 

Проверяем длину массива корзины. Если 0 - показываем дружелюбное сообщение о пустой корзине. Иначе рендерим список товаров и итоговую информацию. Фрагмент <>...</> позволяет вернуть несколько элементов без добавления лишнего div в DOM.

Бейдж с количеством

<h2>
    Корзина
    {totalItems > 0 && (
        <span className="cart-badge">{totalItems}</

Рядом с заголовком показываем количество товаров в виде бейджа. Оператор && рендерит бейдж только когда есть товары. Если корзина пуста, totalItems равно 0, условие ложно, и бейдж не отображается. Это визуальная подсказка о состоянии корзины.

Рендеринг товаров корзины

{cart.map(item => (
    <div key={item.id} className="

Мы используем map для отображения каждого товара из корзины. В отличие от каталога, здесь мы показываем item.quantity и предоставляем элементы управления для изменения количества. Каждый товар получает уникальный key по id.

Элементы управления количеством

<div className="quantity-controls">
    <button onClick={() => 

Пользователь может увеличить, уменьшить количество или полностью удалить товар. Кнопки "-" и "+" изменяют quantity, кнопка "Удалить" убирает товар из корзины. Все три функции принимают id товара для идентификации, какой элемент изменять.

Оформление заказа

<button 
    onClick={() => {
        alert(`Заказ оформлен на сумму ${

При клике показываем уведомление с суммой заказа и очищаем корзину. toLocaleString() форматирует число с разделителями разрядов. В реальном приложении здесь был бы запрос к серверу для сохранения заказа, но для учебного примера достаточно alert и очистки корзины.

Форматирование цены

<div className="product-price">
    {product.price.toLocaleString()} ₽
</div>

Метод toLocaleString() добавляет пробелы для разделения тысяч. Цена 75000 превращается в "75 000", что намного читабельнее. Формат зависит от локали браузера - в русской версии будет пробел, в английской - запятая.