Sobre a Aula
Renderização de listas de dados
No tópico anterior, aprendemos sobre a utilização de operadores ternários para renderização condicional.
Hoje, vamos aprender sobre como renderizar listas de dados no React.
O que são listas de dados?
Listas de dados são coleções de informações organizadas em uma estrutura linear.
No React, podemos renderizar listas de dados usando diversos métodos, como:
- Componentes
map
: O componentemap
é um componente funcional que permite iterar sobre uma lista de dados e renderizar um elemento para cada item da lista. - Laços
for
: Podemos usar laçosfor
para iterar sobre uma lista de dados e renderizar elementos condicionalmente. - Componentes customizados: Podemos criar componentes customizados para renderizar listas de dados de forma mais complexa e reutilizável.
Exemplo de renderização de listas de dados
Vamos ver um exemplo de como renderizar uma lista de dados usando o componente map
:
JavaScript
const produtos = [ { id: 1, nome: "Produto 1", preco: 10.00, }, { id: 2, nome: "Produto 2", preco: 20.00, }, { id: 3, nome: "Produto 3", preco: 30.00, }, ]; const App = () => { return ( <div> <h1>Lista de produtos</h1> <ul> {produtos.map((produto) => ( <li key={produto.id}> {produto.nome} - R${produto.preco} </li> ))} </ul> </div> ); };
Neste exemplo, o componente App
renderiza uma lista de produtos usando o componente map
.
O componente map
itera sobre a lista de produtos e renderiza um li
para cada produto.
O li
contém o nome e o preço do produto.
Observações importantes
Ao renderizar listas de dados, é importante:
- Usar chaves: Cada item da lista deve ter uma chave única. A chave é usada para identificar o item na lista e para otimizar a renderização.
- Evitar mutações: É importante evitar mutar a lista de dados diretamente no componente. Se você precisar modificar a lista de dados, faça uma cópia da lista e modifique a cópia.
Resumo
- Renderize listas com
map
,for
ou componentes customizados. - Use chaves para identificar cada item da lista.
- Evite mutar a lista diretamente no componente.
Entrar na conversa