Содержимое между тегами

Все блоки на странице фестиваля имеют одинаковую рамку: белую, со скруглёнными углами и тенью. Она есть у карточек групп, и билеты должны выглядеть так же. Вместо того чтобы везде писать один и тот же div с одним и тем же классом, можно сделать компонент, который и есть эта рамка, и класть в него что угодно — так же, как вы кладёте текст и элементы между тегами div:

<Card>
    <h3>Кемпинг</h3>
    <p>Кемпинг открывается в пятницу.</p>
</Card>

То, что находится между открывающим и закрывающим тегом компонента, React передаёт ему как проп со специальным именем: children. Компонент ставит это туда, куда нужно:

export default function Card({ children }) {
    return <div className="card">{children}</div>;
}

Так страница получает вот это:

<div class="card">
    <h3>Кемпинг</h3>
    <p>Кемпинг открывается в пятницу.</p>
</div>

children может быть всем, что можно написать в JSX: текстом, элементами, другими компонентами. А компонент может принимать children вместе с другими пропсами. <Card title="Кемпинг">…</Card> получает и title, и children.

Такие компоненты, которые просто дают своему содержимому рамку или раскладку, часто встречаются в React-приложениях: карточка, диалог, раздел страницы с заголовком. Один компонент решает, как выглядит рамка, а остальное приложение её наполняет.