Объекты и массивы

Приложения редко пишут данные прямо в JSX. Обычно данные лежат в массиве объектов, их загружают с сервера или хранят в файле, как группы фестиваля в начале App.jsx:

const bands = [
    { id: 1, name: "Ночные поезда", stage: "Главная сцена", day: "Пятница", time: "20:00", genre: "рок" },
    { id: 2, name: "Лунные коты", stage: "Шатёр", day: "Пятница", time: "18:30", genre: "поп" },
    // …
];

Пропсами могут быть значения из массива: name={bands[0].name}. Но когда полей много, каждая карточка становится длинной. Проп может быть любым значением, в том числе целым объектом, поэтому группу можно передать одним пропом:

<BandCard band={bands[0]} />

Тогда карточка принимает проп band и читает свойства группы:

export default function BandCard({ band }) {
    return (
        <article className="card">
            <h3>{band.name}</h3>
            <p>{band.genre}</p>
        </article>
    );
}

Какой способ лучше? Отдельные пропсы, такие как name и stage, сразу показывают, что нужно компоненту, и работают с любыми данными, даже с текстом, написанным прямо в JSX. Один объект короче, когда данные уже являются объектом, а компоненту нужна большая часть его полей. В React-коде встречаются оба варианта.

Проп может быть и массивом. Например, компонент со списком сцен может показать их через запятую с помощью join():

<StageList stages={["Главная сцена", "Шатёр", "Лесная сцена"]} />

export default function StageList({ stages }) {
    return <p>Сцены: {stages.join(", ")}</p>;
}

Сцены: Главная сцена, Шатёр, Лесная сцена

Писать bands[0], bands[1] и так далее для каждой карточки утомительно, а когда добавляется группа, приходится добавлять строку. Как сделать карточку для каждого элемента массива, показывает следующий урок. Пока пишите карточки по одной.