Aus einem Array wird eine Liste

Eine Festival-App ist voller Listen: Bands, Bühnen, Tickets. Im JavaScript-Kurs hast du ein Array mit einer Schleife angezeigt, die für jedes Element ein li erzeugt und an die Seite gehängt hat. In React erzeugst du Elemente nicht einzeln. Du verwandelst das Array aus Daten in ein Array aus JSX-Elementen, und React zeigt sie alle an.

Die Methode dafür kennst du schon: map(). Sie ruft ihre Funktion für jedes Element auf und macht aus den Rückgabewerten ein neues Array. Und die Funktion kann JSX zurückgeben:

const buehnen = ["Hauptbühne", "Zelt", "Waldbühne"];
const eintraege = buehnen.map((buehne) => <li>{buehne}</li>);

eintraege ist ein Array aus drei Elementen: <li>Hauptbühne</li>, <li>Zelt</li> und <li>Waldbühne</li>. Wenn du ein Array in geschweifte Klammern in JSX setzt, zeigt React seine Elemente nacheinander an. Du kannst das map() also direkt dort schreiben, wo die Einträge hin sollen:

const buehnen = ["Hauptbühne", "Zelt", "Waldbühne"];

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

Die Seite zeigt eine Liste der drei Bühnen. Ist das JSX der Funktion länger als eine Zeile, setze es in Klammern, genau wie nach return:

{buehnen.map((buehne) => (
    <li>
        <strong>{buehne}</strong>
    </li>
))}

Das Beste kommt, wenn sich die Daten ändern. Füge dem Array eine Bühne hinzu, und die Liste hat einen Eintrag mehr, ohne dass du das JSX änderst. Die Seite folgt den Daten.

Wenn du den Code ausführst, zeigt die Konsole eine Warnung von React: Each child in a list should have a unique "key" prop. Die Seite funktioniert trotzdem. Was React will, steht in der nächsten Übung.