React: Скомпоновать мелкие компоненты в одном

Собери составной ProductCard из трёх маленьких компонентов: Title, Price, BuyButton. Логика — в пропсах, без состояния.

Композиция компонентов — основа React. Мелкие части проще тестировать и переиспользовать, а из них удобно собирать крупные.

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

Создай три маленьких компонента: Title, Price, BuyButton.
Скомпонуй их внутри ProductCard.
Передай обработчик покупки через пропсы и навесь на кнопку.

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

Отобрази карточку товара с заголовком, ценой и кнопкой. // … existing code … Финальный результат должен быть таким: // … existing code …

💡 Подсказка

Составной компонент — это просто композиция JSX:

<article className="product-card">
  <Title>{title}</Title>
  <Price value={price} currency={currency} />
  <BuyButton onClick={onBuy} />
</article>

Пропсы — контракт между компонентами; состояние не требуется.

👀 Решение

import React from 'react';
import './styles.css';
 
export function Title({ children }) {
  return <h3 className="product-title">{children}</h3>;
}
export function Price({ value, currency = '₽' }) {
  return <p className="product-price">{value} {currency}</p>;
}
export function BuyButton({ label = 'Купить', onClick }) {
  return <button className="action-button" onClick={onClick}>{label}</button>;
}
 
export function ProductCard({ title, price, currency = '₽', onBuy }) {
  return (
    <article className="product-card">
      <Title>{title}</Title>
      <Price value={price} currency={currency} />
      <BuyButton onClick={onBuy} />
    </article>
  );
}
 
export default function App() {
  function handleBuy(product) {
    alert(`Покупка: ${product}`);
  }
  const product = { title: 'Кофе', price: 299 };
 
  return (
    <main className="challenge-container">
      <section>
        <ProductCard
          title={product.title}
          price={product.price}
          currency="₽"
          onBuy={() => handleBuy(product.title)}
        />
      </section>
    </main>
  );
}

Почему это работает: Мелкие компоненты инкапсулируют ответственность, а ProductCard лишь их компонует. Тестируемость и переиспользование повышаются.

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

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

React: Скомпоновать мелкие компоненты в одном

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

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

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