Renderizzare una lista

Fa parte della sezione Fondamenti del percorso React di Coddy. Lezione 35 di 42.

I dati di solito sono contenuti negli array e map trasforma un array in un elenco di elementi:

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

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

map chiama la tua funzione freccia una volta per ogni elemento e raccoglie gli elementi <li> restituiti. React esegue il rendering dell'intero array. Aggiungi un frutto ai dati e l'elenco cresce da solo; il markup non cambia mai.

L’attributo key={fruit} assegna a ogni elemento un’identità stabile. Ne parleremo meglio nella prossima lezione; per ora, includi sempre un key univoco nell’elemento che restituisci da map.

Sfida

Facile

Esegui il rendering del menu dai dati.

All'interno di <ul id="fruit-list">, usa map per eseguire il rendering di un <li> per ogni frutto dell'array.
Ogni <li> mostra il nome del frutto e lo usa come key.

Provalo tu

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