Aula 4

No React, a iteração sobre arrays é usada para transformar ou exibir listas de elementos na interface do usuário (UI). A abordagem mais comum é utilizar o método .map() do JavaScript para iterar sobre os itens do array e retornar componentes JSX, como <div>, <li>, ou até mesmo tabelas.

Essa técnica é essencial em React para lidar com dados dinâmicos, como listas de tarefas, produtos, ou usuários vindos de uma API ou de um estado interno.

Método .map():

O método .map() é uma função de arrays em JavaScript que cria um novo array transformando cada elemento do array original. No React, utilizamos o .map() para transformar dados em componentes JSX.

key em React:

Sempre que você renderiza uma lista de elementos no React, é necessário incluir uma propriedade key única em cada elemento. A chave ajuda o React a identificar quais itens mudaram, foram adicionados ou removidos, otimizando a renderização.

Estrutura de Dados:

O array pode conter objetos, strings, números ou qualquer estrutura que você deseja transformar em JSX. Exemplo com objetos:

Quando usar iteração sobre arrays no React?

• Listagem de Dados Dinâmicos: Quando você busca dados de uma API e precisa exibi-los em lista.
• Renderização Condicional: Para aplicar estilos ou comportamentos diferentes em cada elemento, com base no valor do array.
• Transformação de Dados: Quando você precisa alterar o formato dos dados antes de exibi-los (ex.: formatar preços ou converter datas).

Dicas:

• Sempre Use key: Evite usar o índice do array (index) como chave em dados dinâmicos.
• Combine .filter() e .map(): Para exibir apenas elementos que atendam a certas condições.
• Cuidado com Loops Aninhados: Em listas complexas, garanta que cada nível tenha sua própria lógica de chave.

Exemplo 1

import React from 'react';

const ItemList = () => {
  const items = ['React', 'Vue', 'Angular'];

  return (
     <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
     </ul>
  );
}

export default ItemList;

    

Exemplo 2

import React from "react";

function ListaDeTarefas() {
  const tarefas = [
    { id: 1, titulo: "Estudar React", concluida: true },
    { id: 2, titulo: "Fazer Exercício", concluida: false },
    { id: 3, titulo: "Preparar Jantar", concluida: true },
  ];

  return (
    <div>
      <h1>Lista de Tarefas</h1>
        <ul>
            {tarefas.map((tarefa) => (
              <li key={tarefa.id}>
                {tarefa.titulo}
              </li>
            ))}
        </ul>
    </div>
  );
}

export default ListaDeTarefas;


    

Exemplo 3

import React from "react";

function ListaDeProdutos() {
  const produtos = [
    { id: 1, nome: "Notebook", preco: 4500 },
    { id: 2, nome: "Smartphone", preco: 2500 },
    { id: 3, nome: "Monitor", preco: 1200 },
  ];

  return (
    <div>
      <h1>Lista de Produtos</h1>
      <table border="1">
        <thead>
          <tr>
            <thNome</th>
            <th>Preço</th>
          </tr>
        </thead>
        <tbody>
          {produtos.map((produto) => (
            <tr key={produto.id}>
              <td>{produto.nome}</td>
              <td>R$ {produto.preco.toFixed(2)}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

export default ListaDeProdutos;