O loop for em React

1. Implemente mapa para com o método .map() no React
2. JavaScript para Loop
3. Função Imediatamente Invocada

Lidar com dados complexos de back-end faz parte do trabalho do desenvolvedor de front-end. Freqüentemente, os dados incluem uma lista de objetos que representam componentes ou outros blocos de construção para a IU.

Por exemplo, ao criar uma loja online, os dados provavelmente conterão a lista de produtos que precisam aparecer no site. Examinar manualmente a lista e criar componentes um por um é ineficiente por vários motivos. Por exemplo, o que você fará se um produto for removido ou adicionado à lista? Você não pode voltar e atualizar seu arquivo JSX todas as vezes.

Existem várias maneiras de percorrer a lista e renderizar componentes ou elementos HTML automaticamente.

Implemente mapa para com o método .map() no React

O método .map(), introduzido no ES6, é a maneira padrão de fazer um loop em um array e retornar um elemento JSX válido que contém dados de cada item na matriz. Os desenvolvedores costumam usar esse método para criar componentes personalizados, bem como elementos HTML regulares.

Embora existam outras maneiras de executar um loop, a maioria dos desenvolvedores do React usa o método .map() porque é fácil de ler, escrever e manter. Veja como fazer um loop em um array de objetos e renderizar os dados do usuário na tela:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    console.log('App started');
    return <div>
    {data.map(person => <p key={person.name}>{`${person.name}, ${person.age} years old`}</p>)}
    </div>
  }
}

Resultado:

John Doe, 44 years old

Jane Doe, 45 years old

Lembre-se de que o método map() será executado duas vezes neste exemplo e retornará um elemento de parágrafo a cada vez. É por isso que é essencial envolver seus resultados com um <div></div>. Cada componente deve retornar um contêiner pai, tendo quantos elementos filho você desejar.

Atributo key

Lembre-se de que cada elemento criado usando o método .map() deve ter um identificador de key, definido com um valor único.

<p key={person.name}>{}</p>)

O React não recomenda o uso do valor index para gerar um valor único para a propriedade key.

Passando props

Se você for usar o método .map() para renderizar vários componentes, você também pode passar os adereços.

Digamos que estejamos tentando renderizar vários componentes de Product. Aqui está como passaríamos os adereços:

return <div>
    {data.map(product => <Product price={product.price} name={product.name}></Product>)}
    </div>

JavaScript para Loop

Outra maneira de fazer um loop em um array é usar o loop for. Se você escolher esta abordagem, você deve executar o loop acima do bloco return.

Esta é a aparência do código:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    let persons = [];
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return <div>
    {persons}
    </div>
  }
}

Comparado com .map(), esta abordagem é mais detalhada e mais difícil de entender. No entanto, os resultados seriam os mesmos.

Função Imediatamente Invocada

É tecnicamente possível usar o loop for em sua instrução return, mas você teria que criar uma função e usar o loop for como o corpo. Assim que terminar de escrever a função, você deve segui-la com colchetes () para chamá-la imediatamente. Funcionaria assim:

class App extends Component {
  render() {
    const data = [{name: "John Doe", "age": 44}, {name:"Jane Doe", "age": 45}]
    return 
    <div>
    {function() {
      let persons = []
    for (let i = 0; i<data.length; i++){
      persons.push(<p>{data[i].name + ", " + data[i].age + " years old"}</p>)
    }
    return persons
    }()
    }</div>
  }
}