Afficher une liste

Fait partie de la section Les fondamentaux du Journey React de Coddy. Leçon 35 sur 42.

Les données se présentent généralement sous forme de tableaux, et map transforme un tableau en une liste d’éléments :

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

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

map appelle ta fonction fléchée une fois par élément et rassemble les éléments <li> renvoyés. React affiche le tableau entier. Ajoute un fruit aux données et la liste s’agrandit toute seule ; le balisage ne change jamais.

L’attribut key={fruit} donne à chaque élément une identité stable. Nous y reviendrons dans la leçon suivante ; pour l’instant, ajoute toujours une key unique à l’élément que tu renvoies depuis map.

Défi

Facile

Affiche le menu à partir des données.

À l’intérieur de <ul id="fruit-list">, utilise map pour afficher un <li> par fruit du tableau.
Chaque <li> affiche le nom du fruit et l’utilise comme key.

Essayez vous-même

<!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>