DEV Community

masia
masia

Posted on • Edited on

1

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.

AWS Q Developer image

Build your favorite retro game with Amazon Q Developer CLI in the Challenge & win a T-shirt!

Feeling nostalgic? Build Games Challenge is your chance to recreate your favorite retro arcade style game using Amazon Q Developer’s agentic coding experience in the command line interface, Q Developer CLI.

Participate Now

Top comments (0)

Runner H image

An AI Agent That Handles Life, Not Just Work

From ordering flowers to booking your dinner — let Runner H turn your ideas into actions. No prompts, no hassle. Just outcomes.

Try for Free

👋 Kindness is contagious

Discover fresh viewpoints in this insightful post, supported by our vibrant DEV Community. Every developer’s experience matters—add your thoughts and help us grow together.

A simple “thank you” can uplift the author and spark new discussions—leave yours below!

On DEV, knowledge-sharing connects us and drives innovation. Found this useful? A quick note of appreciation makes a real impact.

Okay