ProductCard with SRP

ParentContainerComponent.jsx

import ProductCard from './ProductCard';

export default function ParentContainerComponent() {
  const [product,  setProduct] = useState(null);
  const [isAddingToCart, setIsAddingToCart] = useState(false);
  const [error, setError] = useState(null);

  const addToCart = async () => {
    setIsAddingToCart(true);
    try {
      const response = await fetch(`/api/cart/${props.product.id}`, {
        method: 'POST',
      });
      if (response.ok) {
        setProduct(response.data);
      } else {
        setError("Error adding to cart");
      }
    } catch (error) {
      setError("Error adding to cart");
    } finally {
      setIsAddingToCart(false);
    }
  };

  return (
    <ProductCard product={product} onClick={addToCart}/>
  );
}

ProductCard.jsx

export default function ProductCard(product, onClick) {
  return (
    <div className="product-card">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>{product.price}</p>
      <button onClick={onClick}>Add to Cart</button>
    </div>
  );
}