Renderizar uma Lista

Parte da seção Fundamentos do Journey de React da Coddy. Lição 35 de 42.

Os dados geralmente vêm em arrays, e map transforma um array em uma lista de elementos:

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

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

map chama sua função de seta uma vez para cada item e reúne os elementos <li> retornados. O React renderiza o array inteiro. Adicione uma fruta aos dados e a lista aumenta sozinha; a marcação nunca muda.

O atributo key={fruit} dá uma identidade estável a cada item. Você aprenderá mais sobre isso na próxima lição; por enquanto, sempre inclua uma key exclusiva no elemento que você retorna de map.

Desafio

Fácil

Renderize o menu a partir dos dados.

Dentro de <ul id="fruit-list">, use map para renderizar um <li> para cada fruta do array.
Cada <li> exibe o nome da fruta e o usa como key.

Experimente você mesmo

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