Loops/Repetições/Iterações no JSX do React

Escrito por

JSX é a sintaxe que permite escrevermos HTML dentro do Javascript (sim, isso parece estranho, rs) em componentes ReactJS. E um fator muito interessante do JSX é que ele não permite trocar o escopo, assim como é possível fazer um loop/repetição em PHP. Onde apenas deixamos o for/foreach/while dentro do escopo do PHP e o HTML fora do escopo seria repetido.

Algo como:

1<ul><!-- aqui temos HTML normalmente -->
2<?php for($i=0; $i<10; $i++){ // trocamos o escopo para PHP ?>
3<li><?php echo $x ?></li><!-- aqui alternamos o escopo entre HTML/PHP -->
4<?php } ?>
5</ul>

Perceba que no exemplo anterior, sempre que queremos alternar para PHP, apenas usamos o <?php. Em JSX podemos tentar fazer algo semelhante, porém isso não funcionaria. Pois JSX é Javascript, então não tem como alternarmos o escopo. :(

Forma 1:

Nesta maneira geramos fragmentos de JSX dentro de um array e escrevemos este array onde desejamos a nossa saída. Olhando o código fica mais simples entender:

1class Loop1 extends React.Component{
2 render(){
3 let rows = []
4 for(let i=0; i<5; i++){
5 rows.push(<li>Num: {i}</li>)
6 }
7 return (
8 <div>
9 <h1>Loop 1:</h1>
10 <ul>
11 {rows}
12 </ul>
13 </div>
14 )
15 }
16}

Apesar de funcionar bem, esta maneira acaba ficando um pouco confusa em componentes um pouco mais complexos.

Forma 2:

Nesta maneira utilizamos um método separado para renderizar cada linha e o método array.map para iterar sobre os valores. Na verdade, poderíamos até mesmo utilizar outro componente na renderização.

1class Loop2 extends React.Component{
2 renderRow(row){
3 return (<li>Num: {row}</li>)
4 }
5 render(){
6 let rows = []
7 for(let i=0; i<5; i++){
8 rows.push(i)
9 }
10 return (
11 <div>
12 <h1>Loop 2:</h1>
13 <ul>
14 {rows.map(this.renderRow)}
15 </ul>
16 </div>
17 )
18 }
19}

Esta forma é a minha favorita para renderizar lista de dados, pois mantem o código bem organizado e permite tratar quando a lista é vazia. Veja este exemplo:

1class Loop3 extends React.Component {
2 renderRow(row) {
3 return <li>Num: {row}</li>
4 }
5 render() {
6 let rows = []
7 for (let i = 0; i < 5; i++) {
8 rows.push(i)
9 }
10 if (rows.length == 0) {
11 return <p>Nenhum item</p>
12 }
13 return (
14 <div>
15 <h1>Loop 3:</h1>
16 <ul>{rows.map(this.renderRow)}</ul>
17 </div>
18 )
19 }
20}

Se a lista for vazia, ele retorna uma mensagem e não renderiza o loop :)

Você pode ver estes exemplos rodando aqui: https://codepen.io/tuliofaria/pen/NbZgqK

Bom pessoal, estas são algumas ideias para utilizar loops em JSX. Como sempre, fiquem a vontade para comentar e até a próxima!

Curta o DevPleno no Facebookinscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!

Evolua mais rápido

Junte-se a milhares de desenvolvedores no nosso time de alunos premium e alcance mais rápido o próximo nível da sua carreira.

Ver cursos Premium