Tutorial React: Renderizado condicional

¿Qué es el renderizado condicional en React?

El renderizado condicional en React se refiere a la técnica de renderizar diferentes elementos o componentes en función de ciertas condiciones. React permite mostrar u ocultar componentes y elementos HTML en función de las condiciones que se definan.

En React, el renderizado condicional se puede implementar de varias maneras, incluyendo el uso de:

• Operadores ternarios
• Operadores lógicos
• Bloques if-else.

Ejemplo básico de cómo se puede implementar el renderizado condicional en un componente.

// MostrarMensaje.jsx
export default function MostrarMensaje({ mostrar }) {
  if (mostrar) {
    return <p>El mensaje se muestra porque la condición es verdadera.</p>;
  }
  return <p>El mensaje no se muestra porque la condición es falsa.</p>;
}

En este ejemplo, el componente MostrarMensaje recibe una prop llamada mostrar. Si mostrar es true, se renderiza un párrafo con el texto "El mensaje se muestra porque la condición es verdadera." De lo contrario, se renderiza un párrafo con el texto "El mensaje no se muestra porque la condición es falsa."

Renderizado condicional con operador ternario

El operador ternario es una forma concisa de realizar renderizado condicional en React. Este operador tiene la siguiente estructura: condición ? expresiónSiVerdadero : expresiónSiFalso. En el contexto de React, esto se puede utilizar para decidir qué componente o elemento renderizar en función de una condición.

El uso del operador ternario en React es particularmente útil cuando se necesita un renderizado condicional simple y directo dentro del método return de un componente.

Ejemplo de cómo se puede utilizar el operador ternario para renderizar diferentes mensajes basados en una prop.

// MostrarMensajeTernario.jsx
export default function MostrarMensajeTernario({ mostrar }) {
  return (
    <p>{mostrar ? "El mensaje se muestra porque la condición es verdadera." : "El mensaje no se muestra porque la condición es falsa."}</p>
  );
}

En este ejemplo, el componente MostrarMensajeTernario recibe una prop llamada mostrar. Si mostrar es true, se renderiza el texto "El mensaje se muestra porque la condición es verdadera." De lo contrario, se renderiza "El mensaje no se muestra porque la condición es falsa."

Es posible utilizar el operador ternario para renderizar componentes completos, no solo elementos HTML.

Ejemplo más avanzado de mostrar u ocultar un componente.

// MensajeVerdadero.jsx
export default function MensajeVerdadero() {
  return <p>El mensaje se muestra porque la condición es verdadera.</p>;
}

// MensajeFalso.jsx
export default function MensajeFalso() {
  return <p>El mensaje no se muestra porque la condición es falsa.</p>;
}

// MostrarComponentes.jsx
import MensajeVerdadero from './MensajeVerdadero';
import MensajeFalso from './MensajeFalso';

export default function MostrarComponentes({ mostrar }) {
  return (
    <>
      {mostrar ? <MensajeVerdadero /> : <MensajeFalso />}
    </>
  );
}

En este caso, el componente MostrarComponentes utiliza el operador ternario para decidir si renderizar el componente MensajeVerdadero o MensajeFalso en función de la prop mostrar.

El operador ternario también se puede anidar para manejar múltiples condiciones, aunque esto puede hacer que el código sea más difícil de leer. Es importante mantener el código limpio y legible, por lo que se recomienda usar ternarios anidados solo cuando sea realmente necesario y las condiciones sean simples.

// MensajeMultiple.jsx
export default function MensajeMultiple({ valor }) {
  return (
    <p>
      {valor > 10 ? "El valor es mayor que 10" : valor > 5 ? "El valor es mayor que 5" : "El valor es 5 o menor"}
    </p>
  );
}

En este ejemplo, el componente MensajeMultiple utiliza un operador ternario anidado para manejar tres condiciones diferentes basadas en el valor de la prop valor.

El renderizado condicional con el operador ternario es una técnica eficiente y legible cuando se trata de condiciones simples. Sin embargo, para condiciones más complejas, es recomendable considerar otras alternativas como los bloques if-else para mantener la claridad del código.

Renderizado condicional con operador lógico &&

El operador lógico && en React se utiliza para renderizar un componente o elemento HTML solamente si una condición es verdadera. Este operador es útil cuando se desea renderizar algo únicamente en función de una condición booleana sin necesidad de especificar una alternativa en caso de que la condición sea falsa.

En React, el operador && se puede utilizar dentro del método return de un componente. La sintaxis básica es condición && expresión, donde expresión solo se evalúa y renderiza si condición es verdadera.

Ejemplo básico de cómo se puede utilizar el operador && para realizar renderizado condicional en un componente:

// MostrarMensajeCondicional.jsx
export default function MostrarMensajeCondicional({ mostrar }) {
  return (
    <>
      {mostrar && <p>El mensaje se muestra porque la condición es verdadera.</p>}
    </>
  );
}

En este ejemplo, el componente MostrarMensajeCondicional recibe una prop llamada mostrar. Si mostrar es true, se renderiza un párrafo con el texto "El mensaje se muestra porque la condición es verdadera." Si mostrar es false, no se renderiza nada.

El operador && también se puede utilizar para renderizar múltiples elementos condicionalmente. A continuación se muestra un ejemplo de cómo renderizar múltiples elementos en función de la misma condición:

// MostrarMensajes.jsx
export default function MostrarMensajes({ mostrar }) {
  return (
    <>
      {mostrar && <p>El primer mensaje se muestra porque la condición es verdadera.</p>}
      {mostrar && <p>El segundo mensaje también se muestra porque la condición es verdadera.</p>}
    </>
  );
}

En este caso, si la prop mostrar es true, ambos párrafos se renderizan. Si mostrar es false, ninguno de los párrafos se renderiza.

El operador && es una herramienta poderosa para el renderizado condicional en React cuando se necesita una sintaxis limpia y concisa. Sin embargo, es importante utilizarlo adecuadamente para mantener la legibilidad del código, especialmente cuando se maneja lógica más compleja.

Renderizado condicional de múltiples condiciones con if else if y else

En React, el renderizado condicional de múltiples condiciones se puede manejar utilizando bloques if, else if y else. 

Esta técnica es útil cuando se necesita evaluar múltiples condiciones y renderizar diferentes componentes o elementos en función de esas condiciones. A diferencia de los operadores ternarios y lógicos, los bloques if-else permiten una mayor flexibilidad y claridad para manejar condiciones más complejas.

Para implementar el renderizado condicional con if-else, se puede utilizar una función de componente que evalúe las condiciones y devuelva el contenido adecuado.

Ejemplo que muestra cómo se puede lograr esto en un componente.

// MostrarMensajeCondicional.jsx
export default function MostrarMensajeCondicional({ valor }) {
  if (valor > 10) {
    return <p>El valor es mayor que 10.</p>;
  } else if (valor > 5) {
    return <p>El valor es mayor que 5 pero menor o igual a 10.</p>;
  } else {
    return <p>El valor es 5 o menor.</p>;
  }
}

En este ejemplo, el componente MostrarMensajeCondicional recibe una prop llamada valor. Dependiendo del valor de esta prop, el componente renderiza diferentes mensajes:

• Si valor es mayor que 10, se muestra el mensaje "El valor es mayor que 10."
• Si valor es mayor que 5 pero menor o igual a 10, se muestra el mensaje "El valor es mayor que 5 pero menor o igual a 10."
• Si valor es 5 o menor, se muestra el mensaje "El valor es 5 o menor."

El uso de bloques if-else también permite manejar condiciones más complejas y múltiples estados de la aplicación.

Ejemplo más avanzado que maneja múltiples estados y condiciones:

// EstadoUsuario.jsx
export default function EstadoUsuario({ estado }) {
  if (estado === 'activo') {
    return <p>El usuario está activo.</p>;
  } else if (estado === 'pendiente') {
    return <p>El usuario está pendiente de activación.</p>;
  } else if (estado === 'inactivo') {
    return <p>El usuario está inactivo.</p>;
  } else {
    return <p>Estado desconocido.</p>;
  }
}

En este ejemplo, el componente EstadoUsuario recibe una prop llamada estado. Dependiendo del valor de estado, el componente renderiza diferentes mensajes:

• Si estado es 'activo', se muestra el mensaje "El usuario está activo."
• Si estado es 'pendiente', se muestra el mensaje "El usuario está pendiente de activación."
• Si estado es 'inactivo', se muestra el mensaje "El usuario está inactivo."
• Si estado no coincide con ninguno de los casos anteriores, se muestra el mensaje "Estado desconocido."

El renderizado condicional con if-else if-else es una técnica flexible y potente para manejar múltiples condiciones en React. Permite una mayor claridad y control sobre el flujo de renderizado, especialmente en casos donde se necesita evaluar varias condiciones y renderizar diferentes componentes o elementos en función de esas condiciones.

Buenas prácticas de renderizado condicional

El renderizado condicional es una técnica esencial en React, pero su uso indebido puede llevar a código difícil de mantener y errores difíciles de rastrear. A continuación, se presentan algunas buenas prácticas para implementar renderizado condicional de manera eficiente y legible.

Evitar la duplicación de lógica

La duplicación de lógica puede generar inconsistencias y errores difíciles de depurar. En lugar de repetir la misma condición en múltiples lugares, es recomendable abstraer la lógica en funciones o componentes reutilizables.

// helpers.js
export function esValorMayorQue(valor, umbral) {
  return valor > umbral;
}

// MostrarMensaje.jsx
import { esValorMayorQue } from './helpers';

export default function MostrarMensaje({ valor }) {
  if (esValorMayorQue(valor, 10)) {
    return <p>El valor es mayor que 10.</p>;
  }
  return <p>El valor es 10 o menor.</p>;
}

Usar nombres de variables y funciones descriptivas

El uso de nombres de variables y funciones descriptivas mejora la legibilidad del código y facilita su mantenimiento. En lugar de utilizar nombres genéricos como mostrar, es preferible usar nombres que describan claramente su propósito.

// MostrarEstadoUsuario.jsx
export default function MostrarEstadoUsuario({ estado }) {
  if (estado === 'activo') {
    return <p>El usuario está activo.</p>;
  }
  return <p>El usuario no está activo.</p>;
}

Evitar operadores ternarios anidados

Los operadores ternarios anidados pueden hacer que el código sea difícil de leer y mantener. Es preferible utilizar bloques if-else para condiciones complejas.

// MostrarMensajeComplejo.jsx
export default function MostrarMensajeComplejo({ valor }) {
  if (valor > 10) {
    return <p>El valor es mayor que 10.</p>;
  } else if (valor > 5) {
    return <p>El valor es mayor que 5 pero menor o igual a 10.</p>;
  } else {
    return <p>El valor es 5 o menor.</p>;
  }
}

Simplificar el JSX

El JSX debe ser lo más simple y claro posible. Evita la lógica compleja dentro del JSX y, en su lugar, delega esa lógica a funciones o componentes separados.

// MostrarUsuario.jsx
export default function MostrarUsuario({ usuario }) {
  return (
    <>
      {usuario.estaActivo && <p>El usuario está activo.</p>}
      {!usuario.estaActivo && <p>El usuario no está activo.</p>}
    </>
  );
}

Siguiendo estas buenas prácticas, se puede asegurar que el renderizado condicional en React sea eficiente, legible y fácil de mantener, mejorando así la calidad y la robustez del código.