List Rendering Renderização de listas
Última atualização: 2026-11-03
List Rendering Renderização de listas
O React renderiza listas mapeando um array por meio de map() para um conjunto de elementos JSX: prepare um array de dados, devolva JSX com uma key única para cada item, e você poderá renderizar qualquer coleção como uma lista que se atualiza sozinha quando os dados mudam. A key é o que permite ao React casar os itens novos com os antigos, por isso ela nunca é opcional.
| Grupo | Renderização e Estado |
|---|---|
| Tipo | Padrão |
| Desde | Primeiras versões do React |
ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.
📝 Sintaxe
<ul>
{todos.map((todo) => (
<li key={todo.id}>{todo.text}</li> // map: array → array de JSX
))}
</ul>Retorna：Sem valor de retorno — uma convenção de código e um modelo mental.
▶ Exemplo
O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.
Saída：
O título mostra a quantidade de tarefas e a lista abaixo mostra três todos; clicar em "Add task" adiciona "Task 4", "Task 5" e assim por diante em tempo real, e a contagem continua em sincronia.💡 Pontos-chave
⚠️ Aviso Todo elemento devolvido pelo map precisa de uma key estável e única, senão o React avisa no console e as atualizações podem ficar desalinhadas.
💡 Dica Quando o JSX de um item da lista ficar complexo, extraia-o para um componente filho próprio e mantenha o corpo do map reduzido a <TodoItem key={t.id} todo={t} />.
ℹ️ Informação Além do map, métodos que devolvem novos arrays, como filter e slice, costumam ser combinados com a renderização de listas.
🏷️ Mais Renderização e Estado
💡 Casos Relacionados
Mais casos em breve.
📚 Tutoriais Relacionados
❓ Perguntas Frequentes
P Como eu renderizo uma lista no React?
R Use o método map do array para transformar cada item em um elemento JSX com uma key; o array de JSX devolvido é renderizado como uma lista na ordem.
P Por que uma lista renderizada com map precisa de keys?
R A key informa ao React a identidade de cada item, para que o diff saiba o que adicionar, mover ou remover; sem ela as atualizações tendem a se desalinhar e a performance piora.
P Onde coloco a key quando o item da lista é um componente?
R No elemento mais externo da chamada do componente, <TodoItem key={t.id} />, e não no primeiro elemento dentro do componente.
