4

Estou tentando fazer uma lista com um um componente sendo repetido determinada vezes.

Pra ser mais claro, tenho uma ScrollView e um componente próprio PutANumber. Preciso que a ScrollView tenha uma quantidade pré-definida de componentes PutANumber.

Literalmente seria algo mais ou menos assim:

<ScrollView>
  /* Alguma expressão que coloque uma quantidade
     específica de componentes PutANumber... */
</ScrollView>

Considerando que a quantidade de PutANumber necessária seria 5, o código escrito explicitamente seria:

<ScrollView>
  <PutANumber/>
  <PutANumber/>
  <PutANumber/>
  <PutANumber/>
  <PutANumber/>
</ScrollView>

Como fazer isso?

1 Resposta 1

4

Como um componente React nada mais é do que mera chamada à React.createElement, é a mesma coisa que criar um array com N elementos.

Um exemplo simples: criar um array com 5 booleanos true:

const arr = Array.from({ length: 5 }).map(() => true);
console.log(arr);

Claro, no exemplo acima daria para utilizar o Array.prototype.fill, mas como veremos no exemplo a seguir, Array.prototype.map é mais ideal no caso específico do React, uma vez que somos obrigados a passar a propriedade key — o qeu nos obriga diferir, mesmo que minimamente, cada elemento.

No React então não ficaria muito diferente:

function PutANumber() {
  return <div>Componente PutANumber.</div>;
}

function App() {
  return (
    <div>
      {Array.from({ length: 5 }).map((_, index) => (
        <PutANumber key={index} />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector('#root'));
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

O map teve de ser utilizado uma vez que precisamos passar uma key para cada componente sendo renderizado via array. A documentação explica a necessidade da propriedade key.

1
  • 1
    um problema a mais no site que eu estou percebendo que as perguntas tem votos positivos e a respostas não tem pontuação, isso está acontecendo de um modo geral nas perguntas e respostas, no minimo estranho. +1 na sua resposta .
    – novic
    Commented 6/02/2021 às 12:15

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 .