От массива к списку

В приложении фестиваля полно списков: группы, сцены, билеты. В курсе JavaScript вы выводили массив циклом, который создавал для каждого элемента li и добавлял его на страницу. В React элементы по одному не создают. Вы превращаете массив данных в массив JSX-элементов, а React показывает их все.

Нужный метод вам уже знаком: map(). Он вызывает свою функцию для каждого элемента и собирает новый массив из того, что функция вернула. А функция может вернуть JSX:

const stages = ["Главная сцена", "Шатёр", "Лесная сцена"];
const items = stages.map((stage) => <li>{stage}</li>);

items — это массив из трёх элементов: <li>Главная сцена</li>, <li>Шатёр</li> и <li>Лесная сцена</li>. Если поставить массив в фигурные скобки в JSX, React покажет его элементы один за другим. Поэтому map() можно написать прямо там, где должны стоять пункты списка:

const stages = ["Главная сцена", "Шатёр", "Лесная сцена"];

export default function App() {
    return (
        <ul>
            {stages.map((stage) => (
                <li>{stage}</li>
            ))}
        </ul>
    );
}

Страница показывает список из трёх сцен. Если JSX в функции длиннее одной строки, возьмите его в круглые скобки, как после return:

{stages.map((stage) => (
    <li>
        <strong>{stage}</strong>
    </li>
))}

Самое приятное начинается, когда меняются данные. Добавьте сцену в массив, и в списке станет на один пункт больше, а JSX менять не придётся. Страница следует за данными.

Когда вы запустите код, в консоли появится предупреждение от React: Each child in a list should have a unique "key" prop. Страница при этом работает. Чего хочет React, вы узнаете в следующем упражнении.