Renderização Condicional

Na renderização condicional em React, exibimos diferentes partes da UI com base em condições específicas. Isso é útil para criar interfaces dinâmicas e responsivas.

Por exemplo, imagine uma aplicação que exibe mensagens de boas-vindas para usuários logados e um botão de login para usuários não autenticados. Podemos usar uma estrutura condicional para decidir qual componente mostrar.

import React from 'react';

function Saudacao(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Bem-vindo de volta!</h1>;
  }
  return <button>Faça login</button>;
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isLoggedIn: false};
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    return (
      <div>
        <Saudacao isLoggedIn={isLoggedIn} />
      </div>
    );
  }
}

export default App;

Neste exemplo, o componente ‘Saudacao‘ decide se mostra uma mensagem de boas-vindas ou um botão de login com base no estado de ‘isLoggedIn‘.

Usamos uma estrutura 'if‘ para verificar a condição e retornar o componente apropriado. Isso mantém nosso código limpo e fácil de entender.

Ao dominar a renderização condicional em React, você pode criar interfaces mais inteligentes e adaptáveis para seus usuários.

Compartilhar

Compartilhar

Siga-me