1

no jsx não é possível usar o for. então para iterar uma lista, usamos o map. Minha duvida é qual a melhor solução para quando não temos uma lista para essa função, apenas o numero que gostaríamos de repetir.

O que eu fiz foi criar uma lista com um for apenas para depois usar o map

function App() {

  const lista = [];
  const tamanhoDaLista = 7;
  for (let i = 0; i < tamanhoDaLista; i++) {
    lista.push(i);
  } 
  return (
    <div>
      {lista.map((item, index) => (
        <h2 key={index}>Ola Mundo </h2>
      ))}
    </div>
  );
}

Funciona, mas achei repetitivo e muito verboso. Tentei criar uma lista de NULL com o tamanho desejado com o comando

lista =new Array(12)

No entanto, o map não funciona com valores indefinidos.

Gostaria de saber se existe uma forma melhor de fazer isso

1 Resposta 1

2

Você pode criar um componente com uma função que recebe a quantidade de repetições que você deseja fazer e te retorna um array com as posições. Exemplo:

Crie uma pasta chamada functions e dentro dela coloque outra pasta, como por exemplo List e dentro dela coloque seu index.js com o seguinte código:

export function List(loop) {
  let rows = [];
  for (let i = 0; i < loop; i++) {
    rows.push(i);
  }
  return rows;
}

No seu arquivo principal você vai importar seu componente e passar o valor com a quantidade de iterações que deseja, como por exemplo:

  import { List } from "./functions/List";

  const lista = List(6);
  const lista2 = List(3);
  /*nestas linhas eu estou criando uma constante que vai receber um 
  array com a quantidade de posições que eu estou passando como 
  parâmetro, no caso criei uma lista com o valor 6 e outra com o valor 3. */

  export default function App() {
    return (
      <div>
        {lista.map((item, index) => (
          <h2 key={index}>Ola Mundo </h2>
        ))}

        {lista2.map((item, index) => (
          <h2 key={index}>Lista 2</h2>
        ))}
      </div>
    );
  }

Você pode ver em funcionamento clicando aqui.

Desta forma você pode importar seu componente que vai criar as iterações com a quantidade que desejar.

2
  • 1
    Achei bem engenhoso o raciocínio da função, mas não bastaria const lista = [...Array(6).keys()]; const lista2 = [...Array(3).keys()]; ou const lista = Array.from({length: 6}, (x, i) => i); const lista2 = Array.from({length: 2}, (x, i) => i); ? Commented 4/11/2021 às 8:27
  • @AugustoVasques obrigado. {[...Array(6).keys()]} era o que eu queria :)
    – Jonatas
    Commented 6/11/2021 às 2:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .