React - Versão 19.2

11 - Estrutura de Repetição

Nesta aula, vamos aprender como trabalhar com estrutura de repetição no React. Diferente de outras linguagens, no React utilizamos principalmente o método map para renderizar listas de dados.

---

1. Exemplo básico de listagem

No exemplo abaixo, temos um array de nomes e utilizamos o map para exibi-los em uma lista:

// Componente
function Listagem(){

    // Nomes
    const nomes = ["Ralf", "Daniela", "Paulo", "Fernanda", "Fernanda"];

    // Exibir uma lista
    return(
        <ul>
            {nomes.map((nome, indice) => (
                <li key={indice}>{nome}</li>
            ))}
        </ul>
    );
}

// Exportar
export default Listagem;

Explicação:

• O método map percorre cada item do array
• Cada item gera um elemento <li>
• A propriedade key é obrigatória para identificar cada item da lista

---

2. Estrutura de repetição com números

Também podemos utilizar o map para exibir números:

function ListagemNumeros(){

    const numeros = [1, 2, 3, 4, 5];

    return(
        <ul>
            {numeros.map((numero, indice) => (
                <li key={indice}>Número: {numero}</li>
            ))}
        </ul>
    );
}

export default ListagemNumeros;

Explicação:

• O React não se limita a listas de texto
• Qualquer tipo de dado pode ser renderizado

---

3. Estrutura de repetição com condição simples

Podemos combinar repetição com uma verificação simples:

function ListagemCondicional(){

    const nomes = ["Ana", "Bruno", "Carlos", "Daniela"];

    return(
        <ul>
            {nomes.map((nome, indice) => (
                nome === "Daniela" &&
                <li key={indice}>{nome}</li>
            ))}
        </ul>
    );
}

export default ListagemCondicional;

Explicação:

• O item só será exibido se a condição for verdadeira
• Esse padrão é muito comum no React

---

Dicas importantes

• Sempre utilize map para renderizar listas
• A propriedade key ajuda o React a identificar cada item
• Evite usar índices como key em listas dinâmicas (em projetos maiores)

Agora você já sabe como utilizar estruturas de repetição no React para exibir listas de dados!

Abaixo compartilho o vídeo dessa aula: