Operador Ternario en lugar de '&&' en ReactJS/NextJS
Tags: react, nextjs, programming, javascript
Published: 2022-11-06 14:47:46

Ya puedes dejar de usar el operador '&&' en un Conditional Rendering de tus componentes de ReactJS/NextJS


![No more && operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z9fba4cdhsf915642jt8.png)



Si has venido trabajando anteriormente con ReactJS, sabes que el renderizado de los componentes depende de dos cosas, del `state `y las `props`. Así mismo, existen diferentes formas de hacer un Conditional Rendering, aquí les voy a mostrar quizás la más utilizada para validar cuándo mostrar un componente o no en la UI, el operador `&&`, que funciona, pero sin embargo tiene algunos casos en los que podrías tener problemas al momento de hacer el render.



Primero te voy a mostrar cómo funciona el `&&`

Un ejemplo clásico de éste se ve así👇🏾


```
const RandomComponent = ({ condicion }) => {
  return (
    <>
      {condicion && <YourConditionalComponent />}
    </>
  );
}
```


La lógica de éste funciona así:


- Si `condicion` se cumple, osea `true` entonces `<YourConditionalComponent />` se renderiza

- Si `condicion` no se cumple, osea `false` entonces `<YourConditionalComponent />` no se renderiza.


**¿Por qué?** Esto más que un concepto de React es un comportamiento de Javascript que se llama _short-circuit evaluation_ que consiste en que si el primer operador(condicion) es _false_ entonces el operador `&&` se detiene y no evalúa la segunda condición, en éste caso `<YourConditionalComponent />`


Ahora, **por qué No usar el `&&`**


Este operador tiene una sintaxis bastante simple y se utiliza mucho, de hecho funciona, pero el hecho de que algo funcione no quiere decir que debas utilizarlo.


Volviendo al ejemplo de arriba, si `condicion` tiene un resultado `true`o `false`evidentemente vas a tener el comportamiento que esperas según sea el caso, muy bien! Sin embargo ésto funciona sólamente cuando se está evaluendo condiciones que entregan un  `boolean`, quiere decir que cualquier otro caso podrías tener problemas al momento de renderizar.



Por ejemplo: 

- Si quisieras evalues un valor numérico, `0`, tu componente se va a renderizar sin estar cumpliendo totalmente tu condición.
- Por otro lado, si tu `condicion` es `undefined` vas a tener un error del tipo `Uncaught Error: Error...: Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null`


Dicho ésto _**¿qué usar para un Conditional Rendering en tus componentes?**_ 



La solución es muy sencilla, si quieres evitar tener problemas que se salgan de control en tu UI, puedes usar el operador ternario de Javascript, así👇🏾


`condicion ? <YourConditionalComponent /> : null`

Con éste simple cambio podrás tener tu código más seguro y evitar que tu UI se rompa en algún momento del renderizado, recuerda utilizar el Operador Ternario de Javascript en lugar del operador lógico AND, simple pero efectivo.


Nos vemos en la próxima para más tips de javascript, ReactJS, NextJS, Typescript.


Sígueme en mis redes sociales como @viistorrr

- [Twitter](https://twitter.com/viistorrr)
- [Instagram](https://www.instagram.com/viistorrr/)
- [Slack](https://join.slack.com/t/webdev-path/shared_invite/zt-1dkkhbxc2-Eb_jrPdBF7cM6GxYs48_pQ)