Deja de usar "&&" para el Conditional Rendering en React

Evita errores al no usar && en los componentes de React.

Si has visto alguna aplicacin de React, sabes cmo renderizar condicionalmente partes de un componente segn los props y el estado. Aunque existen varias formas de representacin condicional, este artculo se centra en el operador && de JavaScript. La razn principal de este nfasis es que el operador && a menudo genera errores en la interfaz de usuario, que se pueden evitar fcilmente y, a menudo, no se mencionan.

Contenido

1. Cmo funciona el operador && ?
2. Por qu no usar && ?
3. Qu usar en lugar de && ?

Si en algn momento el contenido que comparto te ha resultado til, puedes nominarme a GitHub Stars en este link

Con este pequeo gesto, me ayudas a conseguir ms apoyo para seguir haciendo lo que hago, compartir conocimiento.

Cmo funciona el operador && ?

Un ejemplo clsico de su uso en React sera:

function MyComponent({ condition }) {  return (    <div>      <h1>Title</h1>      {condition && <ConditionalComponent />}    </div>  );}

Brevemente resumido:

• si condition es un valor truthy, se renderiza <ConditionalComponent />
• si condition es un valor falsy, <ConditionalComponent /> no se renderiza

Porqu es eso? No es nada especfico de React, sino ms bien un comportamiento de JavaScript y otros lenguajes de programacin llamado short-circuit evaluation. Es decir, si el primer operando (condition) es falso, el operador AND (&&) se detiene y no evala el segundo operando (<ConditionalComponent/>).

Puede intentarlo en su navegador ejecutando el siguiente fragmento de cdigo en la consola:

// This will display an alert box.true && alert('Hello');// This won't do anything.false && alert('Not hello');

Por qu no usar && ?

A menudo se prefiere la sintaxis corta de && y funciona. Pero! El hecho de que puedas no significa que debas hacerlo.

En nuestro caso anterior, si la condicin se evala como true o false, obtienes lo que esperas: <ConditionalComponent /> se renderiza o no, respectivamente. Todo bien hasta ahora. Sin embargo, si la condicin no se evala como un booleano, puede causar problemas.

Por ejemplo:

• si condition es 0, se muestra 0 en la interfaz de usuario
• si condition es undefined, obtendr un error: "Uncaught Error: Error(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."

Qu usar en lugar de && ?

Para evitar mostrar algo que no desea en la interfaz de usuario, como 0, que podra estropear el diseo, use el operador ternario de JavaScript en su lugar. Es decir.

condition ? <ConditionalComponent /> : null;

Conclusin

Para evitar errores evitables en la interfaz de usuario, use el operador ternario de JavaScript para el conditional rendering de los componentes de React en lugar del operador lgico AND. Es un hechizo simple pero bastante irrompible

 BADcondition && <ConditionalComponent /> GOODcondition ? <ConditionalComponent /> : null

--

P.S: Si en algn momento el contenido que comparto te ha resultado til, puedes nominarme a GitHub Stars en este link

Con este pequeo gesto, me ayudas a conseguir ms apoyo para seguir haciendo lo que hago, compartir conocimiento.

Muchas gracias!