¿Cómo renderizar un componente en función de una…

Normalmente se utilizan los siguientes enfoques:

Renderizado condicional con operador ternario o if: La forma más sencilla.

// Ejemplo con operador ternario en React
function MiComponente({ estaConectado }) {
  return (
    <div>
      {estaConectado ? (
        <p>¡Hola, usuario!</p>
      ) : (
        <button>Iniciar sesión</button>
      )}
    </div>
  );
}

// Ejemplo con if dentro de un componente funcional
function OtroComponente({ estaCargando }) {
  if (estaCargando) {
    return <p>Cargando...</p>;
  }
  return <h1>¡Datos cargados!</h1>;
}

Operador lógico AND (&&): Útil cuando se desea mostrar un componente solo si la condición es verdadera.

// Ejemplo con && en React
function Mensajes({ cantidad }) {
  return (
    <div>
      {cantidad > 0 && <p>Tienes {cantidad} mensajes nuevos.</p>}
    </div>
  );
}

Uso de funciones y componentes hijos: Permite extraer la lógica de renderizado en funciones o componentes separados para mejor legibilidad y reutilización.

// Ejemplo con función en React
function renderizarContenido(rolUsuario) {
  if (rolUsuario === 'admin') {
    return <PanelAdmin />;
  } else if (rolUsuario === 'usuario') {
    return <PerfilUsuario />;
  }
  return <PaginaLogin />;
}

function App({ rolUsuario }) {
  return (
    <div>
      {renderizarContenido(rolUsuario)}
    </div>
  );
}

Arrays y método map: Para mostrar listas de componentes en función de los datos.

// Ejemplo con map en React
function ListaItems({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.nombre}</li>
      ))}
    </ul>
  );
}

CSS display / visibility: Oculta o muestra un elemento, pero el componente aún se renderiza. Es útil en casos simples donde el estado no afecta la estructura del DOM.

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

// Ejemplo de aplicación de clase CSS en React
function ContenidoToggle({ esVisible }) {
  return (
    <div className={esVisible ? '' : 'oculto'}>
      <p>Este contenido se oculta.</p>
    </div>
  );
}

La elección del método depende de la complejidad de la condición y la estructura del componente. Para condiciones simples, a menudo basta con el operador ternario o &&. Para escenarios más complejos y mejor organización del código, se recomienda usar funciones o componentes separados. Se debe tener cuidado al usar CSS display / visibility si no es necesario eliminar completamente el elemento del DOM.

¿Cómo renderizar un componente en función de una condición?