Отображение корзины товаров в React с фильтром по фруктам и подсчётом итогов

Условие

1. С помощью компонента <Cart /> вывести список товаров в виде корзин.
2. Реализовать реакцию на переключатель (checkbox), который будет ограничивать вывод только фруктовыми позициями. Информация о фруктах хранится в массиве PRODUCTS.
3. Вычислить общую стоимость и суммарное количество всех товаров, учитывая состояние чекбокса.

 import "/styles.css";

export default function App() {
    return [
    <div className="wrapper">
    <div>
    <input type="checkbox" id="isFruit" />
    Показывать только фрукты
    </div>
    <div>
    Общее количество: <span></span>
    </div>
    <div>
    Общая цена: <span></span>
    </div>
    <div>Список продуктов:</div>
    <div className="cart-wrapper">
    <Cart name="Apple" price=(10) count=(5) />
    </div>
    </div>
]
}

interface IProps {
    name: string;
    price: number;
    count: number;
}

export const Cart = {{ name, price, count }}; IProps) => {
    return (
    <div className="cart">
    <div className="cart-item">
    <p>Hassname:</p><p>{name}</p>
    </div>
    <div className="cart-item">
    <p>Cywwa:</p><p>{price}</p>
    </div>
    <div className="cart-item">
    <p>Konw+ecTBO:</p><p>{count}</p>
    </div>
    </div>
});

import type { IProduct } from './models'
{
export const PRODUCTS: IProduct[] - [
{
    name: "apple",
    price: 10,
    count: 10,
    ],
    {
    name: "banana",
    price: 20,
    count: 20,
    ],
    {
    name: "orange",
    price: 30,
    count: 30,
    ],
    {
    name: "bread",
    price: 50,
    count: 50,
    ],
    {
    name: "milk",
    price: 60,
    count: 60,
    ],
    {
    name: "eggs",
    price: 70,
    count: 70,
    ],
}

Ответ

Храните checkbox в состоянии, вычисляйте отфильтрованный список и считайте количество как сумму count, а стоимость как сумму price × count. Не храните производные итоги отдельным состоянием.

В исходнике повреждён синтаксис массива и JSX: восстановите PRODUCTS как массив шести объектов с указанными значениями. В модели нет признака фрукта, поэтому для этого примера явно зададим набор имён.

const fruitNames = new Set(['apple', 'banana', 'orange']);
const Cart = ({ name, price, count }: IProps) => <div className="cart">
  <p>{name}</p><p>Цена: {price}</p><p>Количество: {count}</p>
</div>;
function App() {
  const [onlyFruit, setOnlyFruit] = useState(false);
  const items = PRODUCTS.filter(item => !onlyFruit || fruitNames.has(item.name));
  const quantity = items.reduce((sum, item) => sum + item.count, 0);
  const total = items.reduce((sum, item) => sum + item.price * item.count, 0);
  return <div className="wrapper">
    <label><input type="checkbox" checked={onlyFruit}
      onChange={e => setOnlyFruit(e.target.checked)} />Показывать только фрукты</label>
    <p>Общее количество: {quantity}</p><p>Общая цена: {total}</p>
    <div className="cart-wrapper">{items.map(item => <Cart key={item.name} {...item} />)}</div>
  </div>;
}

Импортируйте useState. Без фильтра итоги 240 и 12400, с фильтром 60 и 1400. В реальном каталоге используйте ID и поле категории вместо названия.