Render condicional em ReactJS

Escrito por

Durante a criação de componentes em ReactJS é muito comum que dado um estado do componente, renderizarmos uma estrutura ou outra. Para fazermos isso no ReactJS/JSX temos algumas alternativas.

Primeira maneira: utilizando if´s

JSX é basicamente um Javascript disfarçado de HTML (sim, apenas para facilitar a criação de templates). Então, podemos utilizar JS para renderizar ou não um treco de template.

1import React, { Component } from "react"
2
3class CondComIf extends Component {
4 render() {
5 if (this.props.condicao) {
6 return <p>Condicao eh verdadeira</p>
7 }
8 return <p>Condicao eh falsa</p>
9 }
10}
11
12// para renderizarmos este componente
13// <CondComIf condicao={true} />

Importante: sempre o método render precisa retornar algo e que este algo seja apenas uma tag.

Segunda maneira: condicional com operador lógico

Este formato utiliza a precedência de operadores para funcionar como uma condicional. Por exemplo, se fizermos isso:

1a === 10 && b === 20

Temos uma característica interessante. Caso a===10 retorne falso, na grande maioria das linguagens (por termos um &&) não ira nem executar a comparação de b===20.

Isso nos permite fazer o seguinte:

1const a = 10
2const b = 20
3
4a===b && console.log('A eh igual a B)

Claro que neste exemplo, nunca o console.log será executado, mas creio que fez sentido para você.

Utilizando a mesma ideia, podemos fazer o seguinte:

1import React, { Component } from "react"
2
3class CondComOp extends Component {
4 render() {
5 return (
6 <p>
7 <h2>Vamos fazer o condicional: </h2>
8 {this.props.condicao && <span>Condicao eh verdadeira</span>}
9 {!this.props.condicao && <span>Condicao eh falsa</span>}
10 </p>
11 )
12 }
13}
14
15// para renderizarmos este componente
16// <CondComOp condicao={true} />

Importante: o trecho de template que vem após o && deve seguir a mesma regra do return do render. Ou seja, temos que retornar sempre um nó filho (no caso do exemplo um span).

A combinação destas técnicas nos permite chegar a componentes muito bem organizados. Pois se precisarmos renderizar algo totalmente diferente, podemos usar o if. Caso desejamos apenas mostrar/ocultar trechos menores dentro do render, a segunda opção é muito viável.

Não deixe de comentar e nos seguir em todo lugar :) Ah, e para você que quer aprender ReactJS mais rapidamente, temos o nosso curso completo!

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!

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