El renderizado condicional permite mostrar u ocultar elementos de manera dinámica según ciertas condiciones, aumentando la flexibilidad de los componentes de React. Esta sección explorará dos técnicas estándar de renderizado condicional: el operador && y el operador ternario.

Renderizado condicional con el operador &&

Sintaxis

El operador && en React se utiliza para el renderizado condicional y funciona de manera similar a una instrucción if en JavaScript. Permite renderizar elementos en función de condiciones específicas.

condition && (<p>element</p>)

Esta técnica se emplea frecuentemente cuando se desea mostrar un elemento solo si una condición determinada se evalúa como verdadera.

Ejemplo

Consideremos un ejemplo en el que se desea notificar a los estudiantes que han aprobado un examen. Si la puntuación de un estudiante supera los 60 puntos, se mostrará un mensaje de éxito con su nombre y puntuación.

const Notification = (props) =>
  props.mark > 60 && (
    <p>
      {props.name} has passed the test with {props.mark} points.
    </p>
  );

El componente Notification renderiza condicionalmente un elemento de párrafo <p> en función del valor de la prop mark.

Código completo de la aplicación

La puntuación de Emily no se muestra porque es inferior a 60pts.

Renderizado condicional con el operador ternario

Sintaxis

El renderizado condicional utilizando el operador ternario (? ... : ...) es otra técnica poderosa. Ofrece una forma concisa de renderizar elementos en función de condiciones.

condition ? (true_element) : (false_element)

Este enfoque es adecuado cuando se necesita elegir entre dos elementos distintos según una condición.

Ejemplo

Considere un escenario donde se desea saludar a los usuarios de manera diferente según si han iniciado sesión. El componente Greeting demuestra el renderizado condicional con el operador ternario.

const Greeting = (props) =>
  props.loggedIn ? (
    <p>Welcome to the home page, {props.name}.</p>
  ) : (
    <p>Hello {props.name}, could you please log in.</p>
  );

En este ejemplo, el componente Greeting saluda a los usuarios de manera diferente según el valor de la prop loggedIn.

Código completo de la aplicación

Nota

Aunque ambas técnicas logran el renderizado condicional, es fundamental comprender sus diferencias. El operador && es ideal cuando se desea renderizar un elemento solo si se cumple una condición específica. En cambio, el operador ternario es adecuado para los casos en los que se necesita elegir entre dos elementos distintos según una condición.