React JS: Добавление товаров в корзину

Добавление корзины и функции добавления товара

В компоненте, отображающем товары (например, App), создадим массив orders для хранения товаров в корзине. Вне функции render создадим функцию addToCart, принимающую товар (item) в качестве аргумента. В конструкторе компонента вызовем this.addToCart = this.addToCart.bind(this);. Функция addToCart использует setState для добавления товара в orders:

addToCart(item) {
  this.setState({ orders: [...this.state.orders, item] });
}

Здесь используется spread syntax (…) для создания копии массива и добавления элемента.

Передача функции в дочерние компоненты

Функция addToCart передается как свойство (prop) onAddToCart в дочерний компонент, отображающий список товаров (например, Items):

<Items onAddToCart={this.addToCart} />

В Items это свойство используется:

const Items = (props) => { ... props.onAddToCart ... }

и передается в компонент Item, отображающий каждый товар:

<Item item={item} onAddToCart={props.onAddToCart} />

В Item при нажатии на кнопку «Добавить» вызывается onAddToCart с текущим товаром:

<button onClick={() => props.onAddToCart(props.item)}>+</button>

Отображение корзины

Массив orders передается в компонент корзины (например, Header):

<Header orders={this.state.orders} />

Компонент OrderItem отображает каждый товар в корзине, получая его как свойство.

const OrderItem = (props) => {
  return (
    <div className="item">
      {/* Отображение товара */}
    </div>
  );
};

Header перебирает orders и отображает каждый товар с помощью OrderItem:

const Header = (props) => {
    return (
      <div className="shop-cart">
        {props.orders.map((item) => (
          <OrderItem item={item} key={item.id} />
        ))}
      </div>
    );
};

Стили

В index.css:

.shop-cart {
  /* Стили для корзины */
}

.item {
  /* Стили для каждого товара */
}

.item img {
  /* Стили для изображения товара */
}

Обработка дубликатов и пустой корзины

Добавим проверку на дубликаты и отображение сообщения о пустой корзине:

addToCart(item) {
  const isInCart = this.state.orders.some((order) => order.id === item.id);
  if (!isInCart) {
    this.setState({ orders: [...this.state.orders, item] });
  }
}

render() {
  return (
    <div>
      {this.state.orders.length > 0 ? (
        <div> {/* Тут код отображения товаров */} </div>
      ) : (
        <div className="empty">
          <h2>Товаров нет</h2>
        </div>
      )}
    </div>
  );
}

Добавим стили для сообщения о пустой корзине.

Реализован функционал добавления товаров в корзину с обработкой дубликатов и отображением сообщения о пустой корзине. Товары добавляются корректно, дубликаты игнорируются, и при пустой корзине отображается соответствующее сообщение.