اصنع React الصفحاتالتطبيقاتلوحات التحكمالمحافظالمواقعالمتاجر
مع محادثة

ProductCard.jsx

function ProductCard({ product }) {
  const [likes, setLikes] = useState(0);

  return (
    <div className="card">
      <div className="badge">
        {product.tag}
      </div>
      <h3>{product.name}</h3>
      <p>{product.desc}</p>
      <div className="price">
        €{product.price}<span>/mo</span>
      </div>
      <button onClick={() =>
        setLikes(l => l + 1)}
      >
        ❤️ {likes}
      </button>
    </div>
  );
}