React

The name, price, availability, and cart handler arrive as props. Local state records only how many additions were made from this card. The function passed to onClick runs only when the event occurs; rendering itself does not modify surrounding data or the DOM.

In a real application, onAddToCart would usually call a higher application layer. That layer needs to expose progress and errors, handle repeated submissions, and respect the authoritative server response. A number stored locally in the component is not the source of truth for an order.

TypeScript / React (TSX)

import { useState } from 'react';

type ProductCardProps = {
  id: string;
  name: string;
  price: string;
  inStock: boolean;
  onAddToCart: (productId: string) => Promise<void>;
};

export function ProductCard({
  id, name, price, inStock, onAddToCart,
}: ProductCardProps) {
  const [addedCount, setAddedCount] = useState(0);
  const [isAdding, setIsAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleAdd() {
    setIsAdding(true);
    setError(null);
    try {
      await onAddToCart(id);
      setAddedCount((count) => count + 1);
    } catch {
      setError('Could not add the item. Please try again.');
    } finally {
      setIsAdding(false);
    }
  }

  return (
    <article>
      <h2>{name}</h2>
      <p>{price}</p>
      <p>{inStock ? 'In stock' : 'Out of stock'}</p>
      <button type="button" disabled={!inStock || isAdding} onClick={handleAdd}>
        {isAdding ? 'Adding…' : 'Add to cart'}
      </button>
      {addedCount > 0 && <p aria-live="polite">Added: {addedCount}×</p>}
      {error && <p role="alert">{error}</p>}
    </article>
  );
}