Renderizado Condicional en React

Introducción

En React, la renderización condicional es un concepto fundamental que te permite mostrar diferentes componentes o elementos basándose en ciertas condiciones o en el estado de la aplicación. Esto es esencial para construir interfaces de usuario dinámicas y receptivas. Por ejemplo, podrías querer mostrar un botón de "Iniciar Sesión" a un invitado, pero una página de "Perfil" a un usuario que ha iniciado sesión.

En este laboratorio, aprenderás varias técnicas comunes para implementar la renderización condicional en tus aplicaciones React. Comenzaremos con una configuración básica del proyecto y exploraremos progresivamente diferentes métodos, incluyendo:

• El operador ternario (? :) para lógica simple de if-else.
• El operador lógico && para renderizar un elemento solo cuando una condición es verdadera.
• Uso de variables para almacenar elementos y lograr un JSX más limpio.
• Devolver null para evitar que un componente se renderice.
• Uso del estado de React para crear UIs interactivas que cambian lo que se muestra.

Al final de este laboratorio, tendrás una comprensión sólida de cómo controlar lo que tus usuarios ven basándose en el estado de tu aplicación.

Usar el operador ternario en JSX para condiciones

En este paso, aprenderás a usar el operador condicional (ternario) (? :) para lógica if-else en línea directamente dentro de tu JSX. Esta es una forma concisa de elegir entre dos elementos de UI diferentes para renderizar.

Primero, naveguemos al directorio de nuestro proyecto. Todos los comandos deben ejecutarse desde este directorio.

cd ~/project/my-app

A continuación, necesitamos instalar las dependencias del proyecto.

npm install

Ahora, modifiquemos el componente principal de la aplicación. Abre el archivo src/App.jsx en el explorador de archivos de la izquierda. Crearemos un componente Greeting que muestre un mensaje diferente dependiendo de si un usuario ha iniciado sesión.

Reemplaza todo el contenido de src/App.jsx con el siguiente código:

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  return (
    <div>{isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>}</div>
  );
}

function App() {
  return (
    <div>
      {/* Try changing isLoggedIn to false to see the other message! */}
      <Greeting isLoggedIn={true} />
    </div>
  );
}

export default App;

En el componente Greeting, la expresión {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>} verifica el valor de la prop isLoggedIn. Si es true, renderiza "Welcome back!". De lo contrario, renderiza "Please sign up.".

Ahora, iniciemos el servidor de desarrollo para ver nuestro componente en acción.

npm run dev -- --host 0.0.0.0 --port 8080

Después de que el servidor se inicie, abre la pestaña Web 8080 en la parte superior de la pantalla. Deberías ver el mensaje "Welcome back!". Puedes intentar cambiar isLoggedIn={true} a isLoggedIn={false} en src/App.jsx, guardar el archivo y observar cómo el contenido se actualiza automáticamente en el navegador.

Aplicar el operador lógico && para cortocircuito

En este paso, exploraremos otro patrón común para la renderización condicional: el operador lógico &&. Esto es particularmente útil cuando deseas renderizar un elemento solo si una cierta condición es verdadera, y no renderizar nada en caso contrario. En JavaScript, true && expression siempre se evalúa como expression, y false && expression siempre se evalúa como false. React trata false como un valor que no renderiza nada.

Modifiquemos nuestro archivo src/App.jsx para demostrar esto. Agregaremos un componente que muestre un recuento de notificaciones solo si hay mensajes no leídos.

Mantén el servidor de desarrollo en ejecución. Solo necesitas editar el archivo y guardarlo para ver los cambios.

Reemplaza el contenido de src/App.jsx con el siguiente código:

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 && (
        <h2>You have {unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

function App() {
  const messages = ["React", "Re: React", "Re:Re: React"];
  // Try changing messages to an empty array: const messages = [];
  return <Mailbox unreadMessages={messages} />;
}

export default App;

En este ejemplo, el elemento <h2> se renderiza solo porque unreadMessages.length > 0 es verdadero. Si cambias el array messages en el componente App para que esté vacío (const messages = [];), la condición se vuelve falsa y el elemento <h2> no se renderizará.

Después de guardar el archivo, revisa la pestaña Web 8080. Deberías ver el mensaje "You have 3 unread messages."

Almacenar la condición en una variable y renderizar si es verdadera

En este paso, aprenderás a hacer tus componentes más limpios preparando el contenido en una variable antes de la declaración return. Este enfoque es muy útil cuando la lógica condicional se vuelve más compleja de lo que un operador ternario o && pueden manejar de forma elegante.

Al usar una variable, puedes usar sentencias if estándar de JavaScript para decidir qué debe renderizar el componente.

Actualicemos src/App.jsx para usar esta técnica. Crearemos un componente que muestre un botón de "Login" o "Logout" basado en una prop.

Reemplaza el contenido de src/App.jsx con el siguiente código:

function LoginButton(props) {
  return <button>Login</button>;
}

function LogoutButton(props) {
  return <button>Logout</button>;
}

function LoginControl(props) {
  const isLoggedIn = props.isLoggedIn;
  let button;

  if (isLoggedIn) {
    button = <LogoutButton />;
  } else {
    button = <LoginButton />;
  }

  return (
    <div>
      The user is <b>{isLoggedIn ? "currently" : "not"}</b> logged in.
      {button}
    </div>
  );
}

function App() {
  return <LoginControl isLoggedIn={false} />;
}

export default App;

En el componente LoginControl, declaramos una variable button. Luego, una sentencia if le asigna <LoginButton /> o <LogoutButton />. Finalmente, el JSX en la declaración return simplemente incluye {button}. Esto mantiene la lógica de renderizado separada y hace que la declaración return sea más fácil de leer.

Guarda el archivo y observa los cambios en la pestaña Web 8080. Deberías ver el botón "Login". Intenta cambiar isLoggedIn={false} a isLoggedIn={true} para ver el botón "Logout" en su lugar.

Renderizar null o fragmento vacío si es falso

En este paso, cubriremos un escenario en el que deseas evitar que un componente se renderice por completo. Puedes lograr esto haciendo que el componente devuelva null o un fragmento vacío (<></>).

Este es un patrón común para componentes que solo deben ser visibles bajo condiciones específicas. Por ejemplo, un banner de advertencia que solo debe aparecer si hay una advertencia real.

Modifiquemos src/App.jsx para incluir un componente WarningBanner que solo se renderiza cuando una prop warn es true.

Reemplaza el contenido de src/App.jsx con el siguiente código:

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div style={{ backgroundColor: "yellow", padding: "10px", color: "black" }}>
      Warning!
    </div>
  );
}

function App() {
  // Try changing this to false to hide the banner
  const showWarning = true;

  return (
    <div>
      <WarningBanner warn={showWarning} />
      <p>This is the main content of the page.</p>
    </div>
  );
}

export default App;

En el componente WarningBanner, verificamos la prop warn al principio. Si es false, el componente devuelve inmediatamente null, y React no renderizará nada para él. Si es true, procede a devolver el div de advertencia.

Después de guardar el archivo, revisa la pestaña Web 8080. Verás el banner de advertencia amarillo. Ahora, vuelve a src/App.jsx, cambia const showWarning = true; a const showWarning = false;, y guarda. El banner desaparecerá de la página.

Alternar estado para cambiar la visualización condicional

En este último paso, combinaremos la renderización condicional con el estado de React para crear un componente interactivo. Hasta ahora, nuestras condiciones se basaban en props. Al usar el estado, podemos hacer que la salida del componente cambie en respuesta a las acciones del usuario, como hacer clic en un botón.

Usaremos el hook useState para gestionar el estado del componente.

Modifiquemos src/App.jsx para construir un componente LoginControl que gestione su propio estado isLoggedIn y permita al usuario alternarlo.

Primero, necesitarás importar useState de React. Reemplaza el contenido de src/App.jsx con el siguiente código:

import { useState } from "react";

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

function LoginButton(props) {
  return <button onClick={props.onClick}>Login</button>;
}

function LogoutButton(props) {
  return <button onClick={props.onClick}>Logout</button>;
}

function App() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  const handleLoginClick = () => {
    setIsLoggedIn(true);
  };

  const handleLogoutClick = () => {
    setIsLoggedIn(false);
  };

  let button;
  if (isLoggedIn) {
    button = <LogoutButton onClick={handleLogoutClick} />;
  } else {
    button = <LoginButton onClick={handleLoginClick} />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {button}
    </div>
  );
}

export default App;

Esto es lo que está sucediendo:

1. import { useState } from 'react'; importa el hook useState.
2. const [isLoggedIn, setIsLoggedIn] = useState(false); inicializa una variable de estado isLoggedIn a false. setIsLoggedIn es la función que usamos para actualizar este estado.
3. Definimos las funciones handleLoginClick y handleLogoutClick que llaman a setIsLoggedIn para actualizar el estado.
4. A los componentes LoginButton y LogoutButton se les pasa la función manejadora apropiada a través de su prop onClick.
5. El componente Greeting y la variable button dependen del estado isLoggedIn, por lo que se volverán a renderizar cada vez que cambie el estado.

Guarda el archivo y ve a la pestaña Web 8080. Verás el mensaje "Please sign up." y un botón "Login". Haz clic en el botón "Login". El estado se actualizará y la interfaz de usuario cambiará para mostrar "Welcome back!" y un botón "Logout".

Resumen

¡Felicitaciones por completar este laboratorio sobre Renderizado Condicional en React! Has aprendido y practicado las técnicas más comunes para controlar lo que tu aplicación muestra basándose en diferentes condiciones.

En este laboratorio, has cubierto:

• Usar el operador ternario (? :) para lógica simple de if-else en línea.
• Aplicar el operador lógico && para renderizar un elemento solo cuando se cumple una condición.
• Almacenar JSX en una variable para manejar lógica más compleja con sentencias if, manteniendo tu sentencia return limpia.
• Devolver null desde un componente para evitar que renderice algo.
• Combinar estas técnicas con el hook useState para crear interfaces de usuario dinámicas e interactivas que responden a las acciones del usuario.

Estos patrones son bloques de construcción fundamentales para casi cualquier aplicación React. Dominarlos te permitirá crear experiencias ricas, receptivas y fáciles de usar.