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>