Como renderizar um componente dependendo da condição…

Normalmente, utilizam-se as seguintes abordagens:

Renderização condicional com operador ternário ou if: A forma mais simples.

// Exemplo com operador ternário no React
function MeuComponente({ estáLogado }) {
  return (
    <div>
      {estáLogado ? (
        <p>Olá, utilizador!</p>
      ) : (
        <button>Entrar</button>
      )}
    </div>
  );
}

// Exemplo com if dentro de um componente funcional
function OutroComponente({ estáA Carregar }) {
  if (estáA Carregar) {
    return <p>A carregar...</p>;
  }
  return <h1>Dados carregados!</h1>;
}

Operador lógico E (&&): Útil quando se deseja mostrar um componente apenas se a condição for verdadeira.

// Exemplo com && no React
function Mensagens({ count }) {
  return (
    <div>
      {count > 0 && <p>Tem {count} mensagens novas.</p>}
    </div>
  );
}

Uso de funções e componentes filhos: Permite extrair a lógica de renderização em funções ou componentes separados para melhor legibilidade e reutilização.

// Exemplo com função no React
function renderizarConteudo(roleUser) {
  if (roleUser === 'admin') {
    return <PainelAdmin />;
  } else if (roleUser === 'user') {
    return <PerfilUtilizador />;
  }
  return <PaginaLogin />;
}

function App({ roleUser }) {
  return (
    <div>
      {renderizarConteudo(roleUser)}
    </div>
  );
}

Arrays e método map: Para exibir uma lista de componentes com base nos dados.

// Exemplo com map no React
function ListaItens({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.nome}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Esconde ou mostra um elemento, mas o componente ainda é renderizado. Adequado para casos simples onde o estado não afeta a estrutura do DOM.

/* Exemplo CSS */
.oculto {
  display: none;
}

// Exemplo de aplicação de classe CSS no React
function ConteudoToggle({ estáVisível }) {
  return (
    <div className={estáVisível ? '' : 'oculto'}>
      <p>Este conteúdo é ocultado.</p>
    </div>
  );
}

A escolha do método depende da complexidade da condição e da estrutura do componente. Para condições simples, geralmente basta o operador ternário ou &&. Para cenários mais complexos e melhor organização do código, recomenda-se usar funções ou componentes separados. Use CSS display / visibility com cuidado se não for necessário remover completamente o elemento do DOM.

Como renderizar um componente dependendo da condição?