Aprende React
Describir la UI

Renderizado condicional

Tus componentes a menudo necesitarán mostrar diferentes cosas dependiendo de diferentes condiciones. En React, puedes renderizar JSX de forma condicional utilizando la sintaxis de JavaScript como las declaraciones if, && y los operadores ? :.

Aprenderás

  • Cómo devolver distinto JSX dependiendo de una condición
  • Cómo incluir o excluir condicionalmente un fragmento de JSX
  • Atajos de sintaxis condicional comunes que encontrarás en las bases de código de React

Devolución condicional de JSX

Supongamos que tienes un componente PackingList que muestra varios Items, que pueden ser marcados como empaquetados o no:

function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Lista de equipaje de Sally Ride</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Traje de vuelo" 
        />
        <Item 
          isPacked={true} 
          name="Casco con dorado a la hoja" 
        />
        <Item 
          isPacked={false} 
          name="Fotografía de Tam" 
        />
      </ul>
    </section>
  );
}

Observa que algunos de los componentes Item tienen su prop isPacked asignada a true en lugar de false. Se desea añadir una marca de verificación (✅) a los elementos empaquetados si isPacked={true}.

Puedes escribir esto como una declaración if/else así:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Si la prop isPacked es true, este código devuelve un árbol JSX diferente. Con este cambio, algunos de los elementos obtienen una marca de verificación al final:

function Item({ name, isPacked }) {
  if (isPacked) {
    return <li className="item">{name} ✅</li>;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Lista de equipaje de Sally Ride</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Traje de vuelo" 
        />
        <Item 
          isPacked={true} 
          name="Casco con dorado a la hoja" 
        />
        <Item 
          isPacked={false} 
          name="Fotografía de Tam" 
        />
      </ul>
    </section>
  );
}

Prueba a editar lo que se devuelve en cualquiera de los dos casos y observa cómo cambia el resultado.

Observa cómo estás creando una lógica de ramificación con las sentencias if y return de JavaScript. En React, el flujo de control (como las condiciones) es manejado por JavaScript.

Devolución de nada con null

En algunas situaciones, no querrás mostrar nada en absoluto. Por ejemplo, digamos que no quieres mostrar elementos empaquetados en absoluto. Un componente debe devolver algo. En este caso, puedes devolver null:

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

Si isPacked es verdadero, el componente no devolverá nada, null. En caso contrario, devolverá JSX para ser renderizado.

function Item({ name, isPacked }) {
  if (isPacked) {
    return null;
  }
  return <li className="item">{name}</li>;
}

export default function PackingList() {
  return (
    <section>
      <h1>Lista de equipaje de Sally Ride</h1>
      <ul>
        <Item 
          isPacked={true} 
          name="Traje de vuelo" 
        />
        <Item 
          isPacked={true} 
          name="Casco con dorado a la hoja" 
        />
        <Item 
          isPacked={false} 
          name="Fotografía de Tam" 
        />
      </ul>
    </section>
  );
}

En la práctica, devolver null en un componente no es común porque podría sorprender a un desarrollador que intente renderizarlo. Lo más frecuente es incluir o excluir condicionalmente el componente en el JSX del componente padre. Aquí se explica cómo hacerlo.

Exclusión condicional de JSX

En el ejemplo anterior, controlabas qué árbol JSX (si es que había alguno) era devuelto por el componente. Es posible que ya hayas notado alguna duplicación en la salida de la renderización:

<li className="item">{name} ✅</li>

es muy similar a

<li className="item">{name}</li>

Ambas ramas condicionales devuelven <li className="item">...</li>:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Aunque esta duplicación no es perjudicial, podría hacer que tu código sea más difícil de mantener. ¿Qué pasa si quieres cambiar el className? ¡Tendrías que hacerlo en dos lugares en tu código! En tal situación, podrías incluir condicionalmente un poco de JSX para hacer tu código más DRY.

Operador condicional (ternario) (? :)

JavaScript tiene una sintaxis compacta para escribir una expresión condicional — el operador condicional u “operador ternario”.

En lugar de esto:

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Puedes escribir esto:

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

Puedes leerlo como “si isPacked es verdadero, entonces (?) renderiza name + ' ✅', de lo contrario (:) renderiza name”)

Profundizar

¿Son estos dos ejemplos totalmente equivalentes?

Si vienes de un entorno de programación orientada a objetos, podrías asumir que los dos ejemplos anteriores son sutilmente diferentes porque uno de ellos puede crear dos “instancias” diferentes de <li>. Pero los elementos JSX no son “instancias” porque no contienen ningún estado interno y no son nodos reales del DOM. Son descripciones ligeras, como los planos. Así que estos dos ejemplos, de hecho, son completamente equivalentes. En Preservar y reiniciar el estado se explica en detalle cómo funciona esto.

Ahora digamos que quieres envolver el texto del elemento completado en otra etiqueta HTML, como <del> para tacharlo. Puedes añadir aún más líneas nuevas y paréntesis para que sea más fácil anidar más JSX en cada uno de los casos:

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {isPacked ? (
        <del>
          {name + ' ✅'}
        </del>
      ) : (
        name