Список карточек

map() умеет превращать данные в компоненты, а не только в li. В уроке про пропсы вы писали отдельный BandCard для каждой группы. Для пяти групп это пять строк, для пятидесяти — пятьдесят, и для каждой новой группы в данных нужна ещё одна. Один map() покажет все:

{bands.map((band) => (
    <BandCard key={band.id} band={band} />
))}

Для каждой группы map() возвращает BandCard и передаёт ему группу в пропсах. Ключ ставится на элемент, который возвращает map(): здесь это BandCard. Элементы списка — это карточки, а не article внутри них.

Данные теперь лежат в отдельном файле, bands.js. Это обычный JavaScript-файл без JSX, который экспортирует массив: export const bands = [ … ];. App.jsx импортирует его именованным импортом, как вы знаете из урока про компоненты: import { bands } from "./bands.js";. Когда данные лежат в отдельном файле, компоненты остаются короткими, а одни и те же данные могут импортировать сразу несколько компонентов.

Типичные ошибки:

• Ключ внутри BandCard, на его article. React нужен ключ у элементов списка, а в BandCard списка нет, там один article. Консоль продолжает предупреждать.
• Чтение ключа в BandCard. key не входит в пропсы, поэтому function BandCard({ key }) получит undefined, а консоль предупредит, что key — не проп. Если карточке нужен идентификатор, он есть в band.id.