Utilização de operadores ternários para renderização condicional

Olá, alunos! No tópico anterior, aprendemos sobre renderização condicional baseada em estados.

Hoje, vamos aprender sobre a utilização de operadores ternários para renderização condicional.

O que é operador ternário?

O operador ternário é uma expressão que pode ser usada para avaliar uma expressão booleana e retornar um valor diferente dependendo do resultado da avaliação.

A sintaxe do operador ternário é a seguinte:

condição ? valor_se_verdadeiro : valor_se_falso

Por exemplo, o seguinte operador ternário retorna o valor “Sim” se a variável idade for maior que 18, e o valor “Não” caso contrário:

idade > 18 ? "Sim" : "Não"

Como usar operadores ternários para renderização condicional

Podemos usar operadores ternários para renderizar elementos ou conteúdo condicionalmente.

Por exemplo, o seguinte código renderiza um h1 com a mensagem “Bem-vindo!” se a variável isLoggedIn for true, e um h1 com a mensagem “Você não está logado.” caso contrário:

const isLoggedIn = true;

const App = () => {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Bem-vindo!</h1>
      ) : (
        <h1>Você não está logado.</h1>
      )}
    </div>
  );
};

Outras possibilidades

Além de renderizar elementos, também podemos usar operadores ternários para renderizar conteúdo dinâmico.

Por exemplo, o seguinte código renderiza o nome do usuário se a variável nome for definida, e a mensagem “Usuário não definido” caso contrário:

const nome = "Fulano";

const App = () => {
  return (
    <div>
      {nome ? (
        <h1>Olá, {nome}!</h1>
      ) : (
        <h1>Usuário não definido.</h1>
      )}
    </div>
  );
};

Conclusão

Operadores ternários são uma ferramenta poderosa que pode ser usada para renderizar elementos ou conteúdo condicionalmente.

Ao aprender a usar operadores ternários, você poderá tornar seus componentes React mais dinâmicos e reativos.

Espero que vocês tenham entendido como usar operadores ternários para renderização condicional.

No próximo módulo, vamos aprender sobre listas no React.

Vamos aprender como renderizar listas de dados e como usar chaves em listas.

Espero que vocês estejam animados para aprender mais sobre listas no React!

Até lá, continuem estudando!