Передача пропсов

Участники объявлены! Теперь каждая карточка должна показывать свою группу. Компонент получает данные от компонента, который его использует, через пропсы (props — сокращение от properties, «свойства»). Записываются они как атрибуты в HTML:

<BandCard name="Ночные поезда" stage="Главная сцена" />
<BandCard name="Лунные коты" stage="Шатёр" />

React собирает все пропсы карточки в один объект и передаёт его функции компонента как аргумент. Параметр обычно называют props, и компонент читает пропсы из него как свойства объекта:

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

Функция одна и та же для всех карточек, но каждый вызов получает другие пропсы. Для первой карточки props — это { name: "Ночные поезда", stage: "Главная сцена" }, а для второй — { name: "Лунные коты", stage: "Шатёр" }. Убедиться в этом можно самому: добавьте в компонент console.log(props);, и консоль покажет по одной строке для каждой карточки:

{ name: "Ночные поезда", stage: "Главная сцена" }
{ name: "Лунные коты", stage: "Шатёр" }

Это та же идея, что и параметры функции в JavaScript: функция пишется один раз, а тот, кто её вызывает, решает, с чем именно. Здесь вызывающий — родитель: компонент, в чьём JSX есть <BandCard … />. Родитель решает, что покажет каждая карточка.

Названия пропсов вы выбираете сами. Только следите, чтобы родитель и компонент писали их одинаково: name и Name — это два разных пропа.