Renderizar una lista

Parte de la sección Fundamentos del Journey de React de Coddy — lección 35 de 42.

Los datos normalmente vienen en arrays, y map transforma un array en una lista de elementos:

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

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

map llama a tu arrow function una vez por elemento y recolecta los elementos <li> devueltos. React renderiza todo el arreglo. Añade un fruit a los datos y la list crece por sí sola; el marcado nunca cambia.

El atributo key={fruit} le da a cada elemento una identidad estable. Más sobre esto en la siguiente lección; por ahora, incluye siempre una key única en el elemento que devuelvas de map.

Desafío

Fácil

Renderiza el menú a partir de los datos.

Dentro de <ul id="fruit-list">, usa map para renderizar un <li> por cada fruta en el arreglo.
Cada <li> muestra el nombre de la fruta y lo usa como key.

Pruébalo tú mismo

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