Domina el Renderizado Condicional en React

---

El renderizado condicional en React permite que la interfaz de usuario cambie según el estado de la aplicación o las condiciones establecidas. Este tipo de renderizado es esencial para manejar diferentes situaciones en la interfaz, como mostrar mensajes personalizados, ocultar o mostrar elementos, o cambiar estilos dinámicamente.

Top Formas de Renderizado Condicional en React

Sintaxis del Operador Ternario

Si condition es verdadera, renderiza el componente <TrueComponent /> de lo contrario, renderiza el componente <FalseComponent />.

{condition ? <TrueComponent /> : <FalseComponent />}

1. Mostrar un Mensaje Según el Estado de Autenticación

El fragmento de código muestra una condición simple en la que se muestra un mensaje si existe; de lo contrario, se muestra un mensaje predeterminado indicando la ausencia de contenido.

{message ? <p>{message}</p> : <p>No hay mensaje</p>}

2. Mostrar u Ocultar un Componente Basado en un Estado

Este código muestra el componente MyComponent solo si showComponent es verdadero; de lo contrario, no se renderiza nada.

{showComponent ? <MyComponent /> : null}

3. Condicionar el Estilo de un Elemento

El color del texto cambia a rojo si isError es verdadero y a verde si es falso, proporcionando una indicación visual del estado.

<div style={{ color: isError ? 'red' : 'green' }}>Este texto cambia de color</div>

4. Renderizar Diferentes Listas Según una Propiedad

Se renderiza una lista ordenada (<ol>) si type es igual a ‘ordered’; de lo contrario, se renderiza una lista desordenada (<ul>), ambas generadas a partir de los elementos en items.

{type === 'ordered' ? <ol>{items.map(item => <li key={item}>{item}</li>)}</ol> : <ul>{items.map(item => <li key={item}>{item}</li>)}</ul>}

5. Mostrar u Ocultar un Botón Según el Rol del Usuario

El botón que ejecuta handleAdminAction se muestra solo si isAdmin es verdadero; de lo contrario, no se renderiza nada.

{isAdmin ? <button onClick={handleAdminAction}>Acción de admin</button> : null}

6. Mostrar un Mensaje Basado en el Estado de Autenticación

Se muestra el mensaje “Bienvenido de nuevo!” si isLoggedIn es verdadero; de lo contrario, se invita al usuario a iniciar sesión.

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn ? <p>Bienvenido de nuevo!</p> : <p>Por favor, inicia sesión.</p>}
  </div>
);

7. Ejemplo con Contenido Diferente Basado en la Hora del Día

Se muestra “Buenos días” si isMorning es verdadero; de lo contrario, se muestra “Buenas noches”.

const isMorning = true;

return (
  <div>
    <p>{isMorning ? 'Buenos días' : 'Buenas noches'}</p>
  </div>
);

8. Cambio de Clase CSS Según Condición

El botón tiene la clase button-active si isActive es verdadero, y muestra el texto “Activo”; si es falso, tiene la clase button-inactive y muestra “Inactivo”.

const isActive = true;

return (
  <button className={isActive ? 'button-active' : 'button-inactive'}>
    {isActive ? 'Activo' : 'Inactivo'}
  </button>
);

Sintaxis del Operador Lógico &&

La sintaxis del operador lógico && se interpreta como:
“Si condition es verdadera, renderiza <Component />”.

Si la condición es falsa, no se renderiza nada.

{condition && <Component />}

1. Mostrar un mensaje si el usuario está autenticado

const isAuthenticated = true;

return (
  <div>
    {isAuthenticated && <p>Bienvenido, usuario autenticado.</p>}
  </div>
);

2. Mostrar un componente de error si ocurre un fallo

const hasError = false;

return (
  <div>
    {hasError && <p className="error">Hubo un error, por favor intenta nuevamente.</p>}
  </div>
);

3. Mostrar una lista de tareas solo si hay tareas pendientes

const tasks = ['Tarea 1', 'Tarea 2'];

return (
  <div>
    {tasks.length > 0 && (
      <ul>
        {tasks.map(task => <li key={task}>{task}</li>)}
      </ul>
    )}
  </div>
);

4. Mostrar un icono de carga mientras se esperan datos

const isLoading = true;

return (
  <div>
    {isLoading && <span className="loading-icon">Cargando...</span>}
  </div>
);

Sintaxis de Declaraciones if/else

La sintaxis de las declaraciones if/else en React se usa fuera del JSX y se emplea para situaciones en las que la lógica es más compleja.

if (condition) {
  // Código que se ejecuta si la condición es verdadera
  return <TrueComponent />;
} else {
  // Código que se ejecuta si la condición es falsa
  return <FalseComponent />;
}

1. Mostrar mensajes según el estado de la suscripción

const isSubscribed = false;

if (isSubscribed) {
  return <p>Gracias por tu suscripción.</p>;
} else {
  return <p>Suscríbete para obtener más contenido.</p>;
}

2. Mostrar un componente según si el usuario es admin o no

const userRole = 'admin';

if (userRole === 'admin') {
  return <AdminDashboard />;
} else {
  return <UserDashboard />;
}

3. Mostrar un componente de carga mientras se obtienen los datos

const isLoading = true;

if (isLoading) {
  return <p>Cargando...</p>;
} else {
  return <DataComponent />;
}

Sintaxis de Guard Clauses: Salida temprana en el código

Este patrón permite “salir” de una función rápidamente en lugar de tener múltiples niveles de anidación. Es útil cuando se tienen varias condiciones y quieres hacer el código más limpio.

if (!condition) return null;
return <Component />;

1. Salida temprana con null si no está autenticado

Si el usuario no está autenticado, se muestra un mensaje y no se renderiza el componente principal.

const isLoggedIn = false;

const Dashboard = () => {
  if (!isLoggedIn) return <p>Por favor, inicia sesión para acceder al dashboard.</p>;

  return <h1>Bienvenido al Dashboard</h1>;
};

2. Salida temprana para una condición no válida

Si el valor de la propiedad userId no está presente, no se hace nada y se retorna null o un mensaje.

const UserProfile = ({ userId }) => {
  if (!userId) return <p>Usuario no encontrado</p>;

  return <div>Perfil del usuario {userId}</div>;
};

3. Salida temprana si el componente está en carga

Antes de renderizar el contenido, se valida si los datos están siendo cargados y se muestra un mensaje de carga.

const LoadingComponent = ({ isLoading, data }) => {
  if (isLoading) return <p>Cargando...</p>;
  if (!data) return <p>No hay datos disponibles</p>;

  return <div>{data}</div>;
};

4. Salida temprana para mostrar un mensaje según el rol del usuario

Si el usuario no tiene el rol adecuado, se muestra un mensaje de acceso denegado y no se renderiza el contenido adicional.

const AdminPanel = ({ userRole }) => {
  if (userRole !== 'admin') return <p>Acceso denegado</p>;

  return <div>Panel de Administración</div>;
};