DEV Community

masia
masia

Posted on • Updated on

Operadores lógico vs ternario en react

El titulo tal vez sea vago, pero basicamente estas en una vista, usando un falsy/truthy con renderizado condicional && y ves un 0 colado.
ejemplo: {count && <div>Más de cero</div>}
Image description
Depende del contexto queras que aparezca el 0, ejemplo: un carrito de articulos, pero la mayoria es solo para mostrar o no mostrar x o y componente.

Habra gente que diria q usar operadores logico es mala practica, y que deberia usar un ternario, usando el anterior codigo de ejemplo: {count ? <div>Más de cero</div> : null} esto funciona, pero si lo ves muy verboso escribir, agregar null y a veces peor si vas a insertar otro ternario dentro de otro ternario, haciendo que sea mucho mas dificil de leer y en algunos casos aumentar la carga cognitiva.

¿Cual usarias un operador logico o ternario? Siguiendo la regla del yingyang ☯️ ambas dependiendo del caso, si vas a usar un falsy/truty en un operador logico para mostrar un elemento en react mayoria de los casos castearlo a un boolean ( da igual el metodo doble bang !! o el metodo Boolean() ) asi te aseguras q si el falsy es un number 0 no se mostrara en pantalla y si quieres mas explicito o no quieres castearlo usa un ternario como el ejemplo anterior donde falsy retorna null.

Top comments (0)