La renderización 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 explora dos técnicas estándar de renderización condicional: el operador && y el operador ternario.

Renderización condicional con el operador &&

Sintaxis

El operador && en React se utiliza para la renderización condicional y funciona de manera similar a una sentencia if en JavaScript. Permite renderizar elementos según 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 en el que 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.

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

Renderizado condicional con el operador ternario

Sintaxis

La renderización condicional utilizando el operador ternario (? ... : ...) es otra técnica poderosa. Ofrece 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

Considera 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.