React: Карточки товаров через map

Создай список карточек товаров из массива products с помощью Array.map. Компонент должен быть статичным — никакого состояния, только пропсы и рендер массива.

Рендер списков — хлеб фронтенда. Преобразуй массив товаров в список карточек. Каждая карточка показывает название и цену.

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

Создай компонент ProductCard с пропсами title и price.
В App отрендери массив products через map.
Используй key={product.id} при рендере элементов списка.
Разметка:
- <article class="product-card">
- <h3 class="product-title">
- <p class="product-price">

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

Отобрази все товары в сетке карточек. Каждая карточка содержит название и цену.

💡 Подсказка

Преобразуй массив: products.map(p => <ProductCard key={p.id} title={p.title} price={p.price} />).
Ключ обязателен для стабильного рендера списков.
Документация: react.dev/learn/rendering-lists

👀 Решение

import React from 'react';
import './styles.css';
 
export function ProductCard({ title, price }) {
  return (
    <article className="product-card">
      <h3 className="product-title">{title}</h3>
      <p className="product-price">{price} ₽</p>
    </article>
  );
}
 
export default function App() {
  const products = [
    { id: 1, title: 'Кофе', price: 299 },
    { id: 2, title: 'Чай', price: 199 },
    { id: 3, title: 'Печенье', price: 149 },
  ];
  return (
    <main className="challenge-container">
      <section>
        <div className="product-grid">
          {products.map((p) => (
            <ProductCard key={p.id} title={p.title} price={p.price} />
          ))}
        </div>
      </section>
    </main>
  );
}

Почему это работает: map преобразует данные в JSX-элементы. Ключи помогают React эффективно обновлять список.

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

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

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

React: Карточки товаров через map

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

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

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

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