Afficher une liste

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

Les données viennent habituellement 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 votre fonction fléchée une fois par élément et collecte les éléments <li> retournés. React affiche l'ensemble du tableau. Ajoutez un fruit aux données et la liste s'agrandit d'elle-même ; le balisage ne change jamais.

L'attribut key={fruit} donne à chaque élément une identité stable. En savoir plus dans la leçon suivante ; pour l'instant, incluez toujours un key unique sur l'élément que vous retournez depuis map.

Défi

Facile

Affichez le menu à partir des données.

À l'intérieur de <ul id="fruit-list">, utilisez map pour afficher un <li> par fruit dans le 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>