React JS: Удаление товаров из корзины с react-icons

Добавление кнопки удаления

Добавим кнопку удаления возле каждого товара в корзине, используя иконки из библиотеки react-icons. Предполагается, что библиотека уже установлена.

В компоненте Adr (ответственном за вывод каждого элемента корзины) импортируем иконку faTrash:

import { FaTrash } from 'react-icons/fa';

Добавим иконку в компонент Adr:

<FaTrash className="delete-icon" />

Класс delete-icon будет использован для стилизации.

Стилизация кнопки удаления

В файле стилей (например, styles.css) добавим стили:

.delete-icon {
  color: #e74c3c;
  position: absolute;
  right: 0;
  top: -25px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.delete-icon:hover {
  color: #c0392b;
  transform: scale(1.5);
}

Реализация функционала удаления

Создадим метод deleteItem в основном компоненте для удаления товара по ID:

deleteItem = (id) => {
  // Взаимодействие с состоянием приложения
};

Этот метод будет передан в компонент Header, а затем в Adr.

Передача метода и обработка события

В основном компоненте создадим свойство onDelete:

onDelete={this.deleteItem}

Передадим его в Header, а затем в Adr. В Adr добавим обработчик onClick к иконке:

<FaTrash className="delete-icon" onClick={() => this.props.onDelete(this.props.item.id)} />

При клике вызовется метод onDelete с ID товара. Для тестирования можно вывести ID в консоль:

deleteItem = (id) => {
  console.log(id);
};

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

Реализуем удаление товара из массива items:

deleteItem = (id) => {
  this.setState({
    items: this.state.items.filter(item => item.id !== id)
  });
};

Метод filter создаёт новый массив, содержащий только элементы с ID, отличным от переданного.

Подсчет и отображение общей суммы

Добавим в Header вывод общей суммы товаров:

<p className="sum">Сумма: ${sum}</p>

Создадим переменную sum со значением 0. В Header переберём массив items и подсчитаем сумму:

sum = this.props.items.reduce((acc, item) => acc + parseFloat(item.price), 0);

Добавим стили:

.sum {
  position: absolute;
  left: 0;
  width: 100%;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 20px;
}

Округлим сумму до двух знаков после запятой:

sum = Intl.NumberFormat('ru-RU', { minimumFractionDigits: 2 }).format(sum);

В этом уроке реализовано удаление товаров из корзины и подсчёт общей суммы.