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

Tomemos un ejemplo donde queremos notificar a los estudiantes que han aprobado un examen. Si la puntuación de un estudiante supera los 60 puntos, mostraremos 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> según el valor de la prop mark.

Código completo de la aplicación

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

Renderizado condicional con el operador ternario

Sintaxis

La renderización condicional utilizando el operador ternario (? ... : ...) es otra técnica poderosa. Proporciona una forma concisa de renderizar elementos según condiciones.

condition ? (true_element) : (false_element)

Este enfoque es adecuado cuando se elige entre dos elementos distintos en función de una condición.

Ejemplo

Considere un escenario donde queremos saludar a los usuarios de manera diferente según si han iniciado sesión. El componente Greeting demuestra la renderización 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