Eine Liste rendern

Teil des Abschnitts Grundlagen der React-Journey von Coddy. Lektion 35 von 42.

Daten liegen in der Regel in Arrays vor, und map verwandelt ein Array in eine Liste von Elementen:

const fruits = ['Apple', 'Banana', 'Cherry'];

<ul>
    {fruits.map((fruit) => <li key={fruit}>{fruit}</li>)}
</ul>

map ruft deine Pfeilfunktion einmal für jedes Element auf und sammelt die zurückgegebenen <li>-Elemente. React rendert das gesamte Array. Füge den Daten eine Frucht hinzu, und die Liste wächst von selbst; das Markup ändert sich nie.

Das Attribut key={fruit} verleiht jedem Element eine stabile Identität. Mehr dazu erfährst du in der nächsten Lektion; gib vorerst immer ein eindeutiges key für das Element an, das du von map zurückgibst.

Aufgabe

Einfach

Rendere das Menü aus Daten.

Verwende innerhalb von <ul id="fruit-list"> map, um für jede Frucht im Array ein <li> zu rendern.
Jedes <li> zeigt den Namen der Frucht an und verwendet ihn als key.

Probier es selbst

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>