Como implementar renderização condicional em React.js (com exemplos)

A renderização condicional é uma forma útil de melhorar seu aplicativo. Aqui está uma seleção de maneiras de usá-lo.

A renderização condicional refere-se à alteração do comportamento de um aplicativo dependendo de seu estado. Por exemplo, você pode alterar a mensagem de saudação do seu aplicativo React para escuro durante a noite. Desta forma, você terá uma mensagem de exibição diferente dependendo da hora do dia.

A renderização condicional permite renderizar diferentes componentes ou elementos do React se uma condição for atendida. Neste tutorial, você aprenderá sobre as diferentes maneiras de usar a renderização condicional em aplicativos React.js.

Maneiras de implementar a renderização condicional

Para acompanhar esses exemplos, você precisa ter um conhecimento básico de como o React funciona. Se você estiver enfrentando dificuldades nesse caso, não se preocupe - temos um guia útil para iniciantes em React.js.

Usando declarações condicionais

Como em JavaScript, você pode usar instruções condicionais como if…else para criar elementos quando certas condições forem atendidas.

Por exemplo, você pode exibir um elemento especificado no bloco if quando uma condição for atendida e exibir um elemento diferente no bloco else se a condição não for atendida.

Considere o exemplo a seguir que exibe um botão de login ou logout dependendo do status de login do usuário.

function Dashboard(props) {
  const { isLoggedIn } = props
  if(isLoggedIn){
    return <button>Logout</button>
  } else{
    return <button>Login</button>
  }
}

Esta função renderiza um botão diferente dependendo do valor isLoggedIn passado como suporte.

Alternativamente, você pode usar o operador ternário. O operador ternário recebe uma condição seguida pelo código a ser executado se a condição for verdadeira seguida pelo código a ser executado se a condição for falsa.

Reescreva a função acima como:

function Dashboard(props) {
  const { isLoggedIn } = props
  return (
    <>
      {isLogged?<button>Logout</Logout>:<button>Login</button>)
    </>
  )
}

O operador ternário torna a função mais limpa e fácil de ler em comparação com a instrução if…else .

Declarando variáveis de elemento

Variáveis de elemento são variáveis que podem conter elementos JSX e serem renderizadas quando necessário em um aplicativo React.

Você pode usar variáveis de elemento para renderizar apenas uma determinada parte do componente quando seu aplicativo atender à condição especificada.

Por exemplo, se você quiser renderizar apenas um botão de login quando o usuário não estiver conectado e um botão de logout somente quando ele estiver conectado, você poderá usar variáveis de elemento.

function LoginBtn(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}
function LogoutBtn(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}
function Dashboard() {
  const [loggedIn, setLoggedIn] = useState(true)
  const handleLogin = () => {
    setLoggedIn(true)
  }
  const handleLogout = () => {
    setLoggedIn(false)
  }
  let button;
  if (loggedIn) {
        button = <LogoutBtn onClick={handleLogout}/>
  } else {
    button = <LoginBtn onClick={handleLogin}/>
  }
    return (
      <>
        {loggedIn}
      </>
    )
}

No código acima, primeiro criei os componentes do botão Login e Logout e depois defina o componente para renderizar cada um deles em condições diferentes.

Neste componente, use o gancho de estado React para controlar quando o usuário está logado.

Agora, dependendo do estado, renderize o componente ou .

Se o usuário não estiver logado, renderize o componente , caso contrário, renderize o componente . As duas funções de identificador alteram o estado de login quando o respectivo botão é clicado.

Usando operadores lógicos

Você pode usar o operador lógico && para renderizar condicionalmente um elemento. Aqui, um elemento é renderizado apenas se a condição for avaliada como verdadeira, caso contrário, será ignorado.

Se quiser notificar um usuário sobre o número de notificações que ele recebe apenas quando tiver uma ou mais notificações, você pode usar o seguinte.

function ShowNotifications(props) {
  const { notifications } = props
  return (
    <>
    {notifications.length > 0 &&
        <p>
          You have {notifications.length} notifications.
        </p>
      }
    </>
  )
}

Em seguida, para renderizar um elemento se a expressão lógica && for avaliada como um valor falso, encadeie o || lógico || operador.

A função a seguir exibe a mensagem “Você não tem notificações” se nenhuma notificação for passada como adereços.

function ShowNotifications(props) {
  const { notifications } = props
  return (
    <>
    {notifications.length > 0 &&
        <p>
          You have {notifications.length} notifications.
        </p> || <p>You have no notifications</p>
      }
    </>
  )
}

Impedir a renderização de um componente

Para ocultar um componente mesmo que ele tenha sido renderizado por outro componente, retorne nulo, em vez de sua saída.

Considere o seguinte componente que só renderiza um botão de aviso se uma mensagem de aviso for passada como adereços.

function Warning (props) {
  const {warningMessage} = props
  if (!warningMessage) {
    return null
  }
  return (
    <>
      <button>Warning</button>
    </>
  )
}

Agora, se você passar ‘warningMessage’ para o componente , um botão de aviso será renderizado. No entanto, se você não fizer isso, retornará nulo e o botão não será exibido.

<Warning warningMessage="Warning message"/> // the warning button is rendered
<Warning/> // the warning button is not rendered

Exemplos de renderização condicional em aplicativos React da vida real

Use renderização condicional para realizar diferentes tarefas em seu aplicativo. Alguns deles incluem a renderização de dados da API apenas quando estão disponíveis e a exibição de uma mensagem de erro apenas quando existe um erro.

Renderizando dados obtidos de uma API no React

A busca de dados de uma API pode demorar um pouco. Portanto, primeiro verifique se está disponível antes de usá-lo em seu aplicativo, caso contrário, o React gerará um erro se não estiver disponível.

A função a seguir mostra como você pode renderizar condicionalmente os dados retornados por uma API.

function FetchData() {
  const [data, setData] = useState(null);
  const apiURL = "https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY";
  // Fetch data from API using Axios
  const fetchData = async () => {
    const response = await axios.get(apiURL)
    // Update state with the data
    setData(response.data) 
  }
  return (
    <>
      <h1>Astronomy picture of the day</h1>
      {
        data && 
        <p>{data.title}</p>
        <p>{data.explanation}</p>
      }
    </>
  )
}

Na função acima, busque os dados da API NASA Apod usando Axios. Quando a API retornar uma resposta, atualize o estado e use o operador lógico && para renderizar os dados somente quando estiverem disponíveis.

Exibindo mensagens de erro

Nos casos em que você deseja exibir um erro somente quando ele existir, use a renderização condicional.

Por exemplo, se você estiver criando um formulário e quiser exibir uma mensagem de erro se um usuário digitar o formato de e-mail errado, atualize o estado com a mensagem de erro e use uma instrução if para renderizá-la.

function showError() {
  const [error, setError] = useState(null)
    return (
      <>
        {
          if (error) {
            <p>An error occurred: {error}</p>
          }
        }
      </>
    )
}

Escolhendo o que usar em seu aplicativo React

Neste tutorial, você aprendeu sobre as diversas maneiras de renderizar elementos JSX condicionalmente.

Todos os métodos discutidos fornecem os mesmos resultados. Escolha o que usar dependendo do caso de uso e do nível de legibilidade que você deseja alcançar.