Mostrar componentes de forma condicional

A veces la pantalla depende de una condición: mostrar un panel de administrador o uno de invitado, enseñar un aviso o esconder contenido. Puedes utilizar operadores normales de JavaScript para decidir qué JSX devolver.

1const Admin = () => <p>Soy un panel de administrador</p>;
2const Invitado = () => <p>Soy un panel de invitado</p>;
3
4export default function Ejem_03() {
5  const isAdmin = true;
6  return isAdmin ? <Admin /> : <Invitado />;
7}

El ternario sigue la forma condición ? resultadoSiEsTrue : resultadoSiEsFalse. Cambia isAdmin a false y verás el otro panel.

Usar if #

Cuando la decisión necesita varias instrucciones, un if puede resultar más claro. Este es otro modo de escribir el cuerpo de Ejem_03:

1if (isAdmin) {
2  return <Admin />;
3}
4return <Invitado />;

El if se escribe antes del JSX, dentro de la función. No puedes colocar una instrucción if directamente entre las etiquetas como si fuera una expresión.

Mostrar algo o no mostrar nada #

1function Avisos() {
2  const hayAviso = true;
3  const mensajes = 0;
4  return (
5    <>
6      {hayAviso && <p>Tienes novedades.</p>}
7      {mensajes > 0 && <p>Mensajes: {mensajes}</p>}
8    </>
9  );
10}
11
12function PanelOculto() {
13  return null;
14}

&& es útil cuando solo hay contenido en el caso verdadero. Evita mensajes && ... si mensajes puede ser cero, porque React puede mostrar ese 0. La comparación mensajes > 0 produce un booleano.

Devolver null indica que ese componente no muestra elementos. Ocultar un panel en React solo controla la interfaz: los permisos sobre datos y acciones deben comprobarse también en el servidor.

Prueba tú #

Añade un mensaje que aparezca únicamente cuando isAdmin sea falso. Resuélvelo una vez con ternario y otra con &&.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.