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

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

Tulio Faria
Tulio Faria27 de dezembro de 2016
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:

<ul><!-- aqui temos HTML normalmente --> <?php for($i=0; $i<10; $i++){ // trocamos o escopo para PHP ?> <li><?php echo $x ?></li><!-- aqui alternamos o escopo entre HTML/PHP --> <?php } ?> </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:

class Loop1 extends React.Component { render() { let rows = [] for (let i = 0; i < 5; i++) { rows.push(<li>Num: {i}</li>) } return ( <div> <h1>Loop 1:</h1> <ul>{rows}</ul> </div> ) } }

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.

class Loop2 extends React.Component { renderRow(row) { return <li>Num: {row}</li> } render() { let rows = [] for (let i = 0; i < 5; i++) { rows.push(i) } return ( <div> <h1>Loop 2:</h1> <ul>{rows.map(this.renderRow)}</ul> </div> ) } }

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:

class Loop3 extends React.Component { renderRow(row) { return <li>Num: {row}</li> } render() { let rows = [] for (let i = 0; i < 5; i++) { rows.push(i) } if (rows.length == 0) { return <p>Nenhum item</p> } return ( <div> <h1>Loop 3:</h1> <ul>{rows.map(this.renderRow)}</ul> </div> ) } }

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 Facebook, inscreva-se no canal e não se esqueça de cadastrar seu e-mail para não perder as novidades. Abraço!
Tulio Faria
Autor
Tulio Faria27 de dezembro de 2016

Últimas do Blog