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 componente map é 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ços for 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.