React: Количество товара в корзине

Реализуй карточку товара с эмодзи 💻, кнопками “Добавить” и “Убрать”, ограничениями количества (0…stock) и пересчётом цены.

Интерактивный UI. Контролируй количество, не выходя за границы — это базовая логика корзины.

Что нужно сделать

Добавь состояние quantity с начальным значением 0.
Кнопки: “Добавить” увеличивает до stock, “Убрать” уменьшает до 0.
Итоговая цена = unitPrice * quantity. Обновляй её на каждый клик.

Финальный вид

Карточка товара с эмодзи 💻, названием, остатком, контролами и итоговой ценой.

Финальный результат должен быть таким:

💡 Подсказка

Состояние: const [quantity, setQuantity] = useState(0).
Границы: quantity > 0 и quantity < stock.
Отключай кнопки на границах для визуального фидбэка.

👀 Решение

import React, { useState } from 'react';
import './styles.css';
 
export function ProductCard({ title, unitPrice, stock }) {
  const [quantity, setQuantity] = useState(0);
  const canDecrease = quantity > 0;
  const canIncrease = quantity < stock;
  const total = unitPrice * quantity;
 
  return (
    <article className="product-card" data-testid="product-card">
      <div className="emoji" aria-hidden="true">💻</div>
      <div>
        <h3 className="product-title">{title}</h3>
        <p className="product-stock">Остаток на складе: {stock}</p>
      </div>
      <div className="qty-controls">
        <button className="action-button" onClick={() => canDecrease && setQuantity(q => q - 1)} disabled={!canDecrease}>
          Убрать
        </button>
        <span aria-label="quantity">{quantity}</span>
        <button className="action-button" onClick={() => canIncrease && setQuantity(q => q + 1)} disabled={!canIncrease}>
          Добавить
        </button>
      </div>
      <p className="price">Итого: {total} ₽</p>
    </article>
  );
}
 
export default function App() {
  return (
    <main className="challenge-container">
      <section>
        <ProductCard title="Ноутбук Pro" unitPrice={999} stock={3} />
      </section>
    </main>
  );
}

Что нужно сделать

Финальный вид

React: Количество товара в корзине

Что нужно сделать

Финальный вид

🧑‍💻 Это не баг! Это фича!