Como fazer um loop dentro do JSX em React JS

Neste artigo você aprenderá a como fazer um loop dentro do JSX, um recurso muito comum em aplicações de React JS

Fala programador(a), beleza? bora aprender mais sobre React JS!

Introdução ao Loop JSX em React

Ao construir aplicações React, uma necessidade comum é renderizar listas de dados.

Para esses casos, React fornece uma maneira elegante e eficiente de fazer loops dentro de JSX: a expressão de mapeamento JavaScript.

Looping com map() em componentes funcionais

Em JavaScript, o método map() é utilizado para iterar sobre os elementos de um array, aplicando uma função a cada elemento e retornando um novo array com os resultados.

Essa é a base de como fazemos loops em JSX em React.

Por exemplo, se quisermos renderizar uma lista de frutas como um componente funcional, poderíamos fazer o seguinte:

import React from 'react';

const FruitList = ({fruits}) => {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
};

export default FruitList;

Chaves em Elementos de Lista

Em React, é crucial adicionar uma propriedade “key” única para cada item filho em uma lista.

O React usa essa chave para identificar qual item na lista foi alterado, adicionado, ou removido, e assim realizar atualizações eficientes na DOM.

import React from 'react';

const FruitList = ({fruits}) => {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
};

export default FruitList;

Renderização Condicional dentro do Loop

Dentro de nosso componente funcional, também podemos utilizar renderização condicional.

Isto significa que podemos alterar o que é renderizado com base nas propriedades de nossos dados.

import React from 'react';

const FruitList = ({fruits}) => {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>
          {fruit.name}
          {fruit.isCitrus ? " - This is a citrus fruit!" : ""}
        </li>
      ))}
    </ul>
  );
};

export default FruitList;

Loop Aninhado em JSX

Uma situação comum que você pode encontrar é a necessidade de realizar loops aninhados dentro do JSX.

Isso ocorre quando você tem um array de objetos e cada objeto contém outro array que você deseja renderizar.

Abaixo está um exemplo de como isso pode ser feito.

Considere que você tem um objeto “FruitBasket” que contém um array “Fruits”.

Cada objeto “Fruit” contém um nome de fruta e um array “Varieties” que lista as variedades dessa fruta.

import React from 'react';

const FruitBasket = ({ baskets }) => {
    return (
        <div>
            {baskets.map((basket, index) => (
                <div key={index}>
                    <h2>{basket.name}</h2>
                    <ul>
                        {basket.fruits.map((fruit, fruitIndex) => (
                            <li key={fruitIndex}>
                                {fruit.name}
                                <ul>
                                    {fruit.varieties.map((variety, varietyIndex) => (
                                        <li key={varietyIndex}>
                                            {variety}
                                        </li>
                                    ))}
                                </ul>
                            </li>
                        ))}
                    </ul>
                </div>
            ))}
        </div>
    );
};

export default FruitBasket;

Essa estrutura aninhada pode parecer complexa à primeira vista, mas é simplesmente uma repetição do padrão de loop que usamos antes.

Assim como antes, usamos a função map() para iterar sobre nossos arrays e retornar o JSX que queremos renderizar.

No caso de loops aninhados, basta encadear chamadas adicionais de map() para cada nível de aninhamento.

Note que cada chamada de map() precisa de sua própria chave única.

Estas são importantes para o React identificar e rastrear cada elemento de forma eficiente.

No exemplo acima, cada nível de loop tem sua própria chave, index, fruitIndex e varietyIndex.

Ao lidar com loops aninhados, pode ser útil dividir os componentes em subcomponentes menores para melhorar a legibilidade e a manutenção do código.

Quer aprender mais sobre React JS? Confira o vídeo abaixo:

Conclusão

Chegamos ao fim do artigo sobre como fazer um loop dentro do JSX!

A estrutura de componente funcional do React fornece uma forma robusta e eficiente de realizar loops dentro do JSX.

Através do uso de chaves únicas e renderização condicional, é possível criar aplicações React dinâmicas e interativas.

Ao trabalhar com JSX e loops em React, é importante manter a simplicidade e a legibilidade do código.

Ao final do processo, seu componente pode ser facilmente exportado para ser usado em outras partes de sua aplicação.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.