Renderizado condicional

Devolucin condicional de JSX

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

Observa que algunos de los componentes Item tienen su prop isPacked asignada a true en lugar de false. Se desea aadir una marca de verificacin () a los elementos empaquetados si isPacked={true}.

Puedes escribir esto como una declaracin if/else as:

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

Si la prop isPacked es true, este cdigo devuelve un rbol JSX diferente. Con este cambio, algunos de los elementos obtienen una marca de verificacin al final:

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

Observa cmo ests creando una lgica de ramificacin con las sentencias if y return de JavaScript. En React, el flujo de control (como las condiciones) es manejado por JavaScript.

Devolucin de nada con null

En algunas situaciones, no querrs 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.

En la prctica, devolver null en un componente no es comn porque podra sorprender a un desarrollador que intente renderizarlo. Lo ms frecuente es incluir o excluir condicionalmente el componente en el JSX del componente padre. Aqu se explica cmo hacerlo.

Exclusin condicional de JSX

En el ejemplo anterior, controlabas qu rbol JSX (si es que haba alguno) era devuelto por el componente. Es posible que ya hayas notado alguna duplicacin en la salida de la renderizacin:

<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 duplicacin no es perjudicial, podra hacer que tu cdigo sea ms difcil de mantener. Qu pasa si quieres cambiar el className? Tendras que hacerlo en dos lugares en tu cdigo! En tal situacin, podras incluir condicionalmente un poco de JSX para hacer tu cdigo ms DRY.

Operador condicional (ternario) (? :)

JavaScript tiene una sintaxis compacta para escribir una expresin 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

Ahora digamos que quieres envolver el texto del elemento completado en otra etiqueta HTML, como <del> para tacharlo. Puedes aadir an ms lneas nuevas y parntesis para que sea ms fcil anidar ms JSX en cada uno de los casos:

Este estilo funciona bien para condiciones simples, pero utilzalo con moderacin. Si tus componentes se desordenan con demasiado marcado condicional anidado, considera la posibilidad de extraer componentes hijos para limpiar las cosas. En React, el marcado es una parte de tu cdigo, por lo que puedes utilizar herramientas como variables y funciones para ordenar las expresiones complejas.

Operador lgico AND (&&)

Otro atajo comn que encontrars es el operador lgico AND (&&) de JavaScript. Dentro de los componentes de React, a menudo surge cuando quieres renderizar algn JSX cuando la condicin es verdadera, o no renderizar nada en caso contrario. Con &&, podras renderizar condicionalmente la marca de verificacin slo si isPacked es true:

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

Puedes leer esto como si isPacked, entonces (&&) renderiza la marca de verificacin, si no, no renderiza nada.

Aqu est en accin:

Una expresin JavaScript && devuelve el valor de su lado derecho (en nuestro caso, la marca de verificacin) si el lado izquierdo (nuestra condicin) es true. Pero si la condicin es false, toda la expresin se convierte en false. React considera false como un agujero en el rbol JSX, al igual que null o undefined, y no renderiza nada en su lugar.

Asignacin condicional de JSX a una variable

Cuando los atajos se interpongan en el camino de la escritura de cdigo simple, prueba a utilizar una sentencia if y una variable. Puedes reasignar las variables definidas con let, as que empieza proporcionando el contenido por defecto que quieres mostrar, el nombre:

let itemContent = name;

Utiliza una sentencia if para reasignar una expresin JSX a itemContent si isPacked es true:

if (isPacked) {
  itemContent = name + " ";
}

Las llaves abren la ventana a JavaScript. Inserta la variable con llaves en el rbol JSX devuelto, anidando la expresin previamente calculada dentro de JSX:

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

Este estilo es el ms verboso, pero tambin el ms flexible. Aqu est en accin:

Como antes, esto funciona no slo para el texto, sino tambin para JSX arbitrario:

Si no ests familiarizado con JavaScript, esta variedad de estilos puede parecer abrumadora al principio. Sin embargo, aprenderlos te ayudar a leer y escribir cualquier cdigo JavaScript y no slo los componentes de React! Escoge el que prefieras para empezar, y luego vuelve a consultar esta referencia si olvidas cmo funcionan los dems.

Recapitulacin

• En React, se controla la lgica de ramificacin con JavaScript.
• Puedes devolver una expresin JSX condicionalmente con una sentencia if.
• Puedes guardar condicionalmente algn JSX en una variable y luego incluirlo dentro de otro JSX usando las llaves.
• En JSX, {cond ? <A /> : <B />} significa si cond, renderiza <A />, si no <B />.
• En JSX, {cond && <A />} significa si cond, renderiza <A />, si no, nada.
• Los atajos son comunes, pero no tienes que usarlos si prefieres el simple if.