Renderização Condicional em React

Introdução

No React, a renderização condicional é um conceito central que permite exibir diferentes componentes ou elementos com base em certas condições ou no estado da aplicação. Isso é fundamental para construir interfaces de usuário dinâmicas e responsivas. Por exemplo, você pode querer mostrar um botão "Entrar" para um convidado, mas uma página de "Perfil" para um usuário logado.

Neste laboratório, você aprenderá várias técnicas comuns para implementar a renderização condicional em suas aplicações React. Começaremos com uma configuração básica do projeto e exploraremos progressivamente diferentes métodos, incluindo:

• O operador ternário (? :) para lógica simples de if-else.
• O operador lógico && para renderizar um elemento apenas quando uma condição é verdadeira.
• Usando variáveis para armazenar elementos para um JSX mais limpo.
• Retornando null para impedir que um componente seja renderizado.
• Usando o estado do React para criar UIs interativas que alteram o que é exibido.

Ao final deste laboratório, você terá uma compreensão sólida de como controlar o que seus usuários veem com base no estado de sua aplicação.

Use o operador ternário no JSX para condição

Nesta etapa, você aprenderá como usar o operador condicional (ternário) (? :) para lógica inline de if-else diretamente dentro do seu JSX. Esta é uma maneira concisa de escolher entre dois elementos de UI diferentes para renderizar.

Primeiro, vamos navegar até o diretório do nosso projeto. Todos os comandos devem ser executados a partir deste diretório.

cd ~/project/my-app

Em seguida, precisamos instalar as dependências do projeto.

npm install

Agora, vamos modificar o componente principal da aplicação. Abra o arquivo src/App.jsx no explorador de arquivos à esquerda. Criaremos um componente Greeting que exibe uma mensagem diferente dependendo se um usuário está logado.

Substitua todo o conteúdo de src/App.jsx pelo seguinte código:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>
  );
}

function App() {
  return (
    <div>
      {/* Try changing isLoggedIn to false to see the other message! */}
      <Greeting isLoggedIn={true} />
    </div>
  );
}

export default App;

No componente Greeting, a expressão {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} verifica o valor da prop isLoggedIn. Se for true, ele renderiza "Welcome back!". Caso contrário, ele renderiza "Please sign up.".

Agora, vamos iniciar o servidor de desenvolvimento para ver nosso componente em ação.

npm run dev -- --host 0.0.0.0 --port 8080

Após o servidor iniciar, abra a aba Web 8080 na parte superior da tela. Você deverá ver a mensagem "Welcome back!". Você pode tentar mudar isLoggedIn={true} para isLoggedIn={false} em src/App.jsx, salvar o arquivo e observar o conteúdo ser atualizado automaticamente no navegador.

Aplique o operador && lógico para short-circuit

Nesta etapa, exploraremos outro padrão comum para renderização condicional: o operador lógico &&. Isso é particularmente útil quando você deseja renderizar um elemento apenas se uma determinada condição for verdadeira e não renderizar nada caso contrário. Em JavaScript, true && expression sempre avalia para expression, e false && expression sempre avalia para false. O React trata false como um valor que não renderiza nada.

Vamos modificar nosso arquivo src/App.jsx para demonstrar isso. Adicionaremos um componente que mostra uma contagem de notificações apenas se houver mensagens não lidas.

Mantenha o servidor de desenvolvimento em execução. Você só precisa editar o arquivo e salvá-lo para ver as alterações.

Substitua o conteúdo de src/App.jsx pelo seguinte código:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

function App() {
  const messages = ["React", "Re: React", "Re:Re: React"];
  // Try changing messages to an empty array: const messages = [];
  return <Mailbox unreadMessages={messages} />;
}

export default App;

Neste exemplo, o elemento <h2> é renderizado apenas porque unreadMessages.length > 0 é verdadeiro. Se você alterar o array messages no componente App para que fique vazio (const messages = [];), a condição se torna falsa e o elemento <h2> não será renderizado.

Após salvar o arquivo, verifique a aba Web 8080. Você deverá ver a mensagem "You have 3 unread messages."

Armazene a condição em uma variável e renderize se for verdadeira

Nesta etapa, você aprenderá como tornar seus componentes mais limpos preparando o conteúdo em uma variável antes da instrução return. Essa abordagem é muito útil quando a lógica condicional se torna mais complexa do que o que um operador ternário ou && pode lidar graciosamente.

Ao usar uma variável, você pode usar instruções if padrão do JavaScript para decidir o que o componente deve renderizar.

Vamos atualizar src/App.jsx para usar essa técnica. Criaremos um componente que exibe um botão "Login" ou "Logout" com base em uma prop.

Substitua o conteúdo de src/App.jsx pelo seguinte código:

function LoginButton(props) {
  return <button>Login</button>;
}

function LogoutButton(props) {
  return <button>Logout</button>;
}

function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
      {button}
    </div>
  );
}

function App() {
  return <LoginControl isLoggedIn={false} />;
}

export default App;

No componente LoginControl, declaramos uma variável button. Em seguida, uma instrução if atribui <LoginButton /> ou <LogoutButton /> a ela. Finalmente, o JSX na instrução return simplesmente inclui {button}. Isso mantém a lógica de renderização separada e torna a instrução return mais fácil de ler.

Salve o arquivo e observe as alterações na aba Web 8080. Você deverá ver o botão "Login". Tente mudar isLoggedIn={false} para isLoggedIn={true} para ver o botão "Logout" em vez disso.

Renderize null ou um fragmento vazio se for falso

Nesta etapa, abordaremos um cenário em que você deseja impedir que um componente seja renderizado completamente. Você pode conseguir isso fazendo com que o componente retorne null ou um fragmento vazio (<></>).

Este é um padrão comum para componentes que só devem ser visíveis sob condições específicas. Por exemplo, um banner de aviso que só deve aparecer se houver um aviso real.

Vamos modificar src/App.jsx para incluir um componente WarningBanner que só renderiza quando uma prop warn é true.

Substitua o conteúdo de src/App.jsx pelo seguinte código:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div style={{ backgroundColor: "yellow", padding: "10px", color: "black" }}>
      Warning!
    </div>
  );
}

function App() {
  // Try changing this to false to hide the banner
  const showWarning = true;

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default App;

No componente WarningBanner, verificamos a prop warn no início. Se for false, o componente retorna imediatamente null, e o React não renderizará nada para ele. Se for true, ele prossegue para retornar a div de aviso.

Após salvar o arquivo, verifique a aba Web 8080. Você verá o banner de aviso amarelo. Agora, volte para src/App.jsx, mude const showWarning = true; para const showWarning = false; e salve. O banner desaparecerá da página.

Alterne o estado para alterar a exibição condicional

Nesta etapa final, combinaremos a renderização condicional com o estado do React para criar um componente interativo. Até agora, nossas condições foram baseadas em props. Ao usar o estado, podemos fazer com que a saída do componente mude em resposta a ações do usuário, como clicar em um botão.

Usaremos o hook useState para gerenciar o estado do componente.

Vamos modificar src/App.jsx para construir um componente LoginControl que gerencia seu próprio estado isLoggedIn e permite que o usuário o alterne.

Primeiro, você precisará importar useState do React. Substitua o conteúdo de src/App.jsx pelo seguinte código:

import { useState } from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

export default App;

Aqui está o que está acontecendo:

1. import { useState } from 'react'; traz o hook useState.
2. const [isLoggedIn, setIsLoggedIn] = useState(false); inicializa uma variável de estado isLoggedIn como false. setIsLoggedIn é a função que usamos para atualizar esse estado.
3. Definimos as funções handleLoginClick e handleLogoutClick que chamam setIsLoggedIn para atualizar o estado.
4. Os componentes LoginButton e LogoutButton recebem a função de manipulador apropriada através de sua prop onClick.
5. O componente Greeting e a variável button dependem do estado isLoggedIn, portanto, eles serão renderizados novamente sempre que o estado mudar.

Salve o arquivo e vá para a aba Web 8080. Você verá a mensagem "Please sign up." e um botão "Login". Clique no botão "Login". O estado será atualizado e a UI mudará para mostrar "Welcome back!" e um botão "Logout".

Resumo

Parabéns por completar este laboratório sobre Renderização Condicional em React! Você aprendeu e praticou as técnicas mais comuns para controlar o que seu aplicativo exibe com base em diferentes condições.

Neste laboratório, você cobriu:

• Usando o operador ternário (? :) para lógica simples de if-else inline.
• Aplicando o operador lógico && para renderizar um elemento apenas quando uma condição é atendida.
• Armazenando JSX em uma variável para lidar com lógica mais complexa com instruções if, mantendo sua instrução return limpa.
• Retornando null de um componente para impedir que ele renderize qualquer coisa.
• Combinando essas técnicas com o hook useState para criar interfaces de usuário dinâmicas e interativas que respondem às ações do usuário.

Esses padrões são blocos de construção fundamentais para quase qualquer aplicativo React. Dominá-los permitirá que você crie experiências ricas, responsivas e amigáveis ao usuário.