Seznam z pole

Festivalová aplikace je samý seznam: kapely, pódia, vstupenky. V kurzu JavaScriptu jste pole zobrazovali cyklem, který pro každý prvek vytvořil li a vložil ho do stránky. V Reactu prvky jeden po druhém nevytváříte. Pole s daty proměníte na pole prvků JSX a React je ukáže všechny.

Metodu, která to umí, už znáte: map(). Zavolá svou funkci pro každý prvek pole a z toho, co funkce vrátí, udělá nové pole. A funkce může vracet JSX:

const podia = ["Hlavní pódium", "Stan", "Lesní scéna"];
const polozky = podia.map((podium) => <li>{podium}</li>);

polozky je pole tří prvků: <li>Hlavní pódium</li>, <li>Stan</li> a <li>Lesní scéna</li>. Když dáte pole do složených závorek v JSX, React ukáže jeho prvky jeden za druhým. map() tak můžete napsat přímo tam, kde mají položky být:

const podia = ["Hlavní pódium", "Stan", "Lesní scéna"];

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

Stránka ukáže seznam tří pódií. Když je JSX ve funkci delší než jeden řádek, dejte ho do závorek, stejně jako za return:

{podia.map((podium) => (
    <li>
        <strong>{podium}</strong>
    </li>
))}

Nejlepší na tom je, co se stane, když se data změní. Přidejte do pole další pódium a seznam bude mít o položku víc, aniž byste v JSX cokoli měnili. Stránka se řídí daty.

Když kód spustíte, ukáže konzole varování od Reactu: Each child in a list should have a unique "key" prop. Stránka i tak funguje. Co React chce, se dozvíte v dalším cvičení.