This content originally appeared on DEV Community 👩💻👨💻 and was authored by Khriztian Moreno
Evita errores al no usar && en los componentes de React.
Si has visto alguna aplicación de React, sabes cómo renderizar condicionalmente partes de un componente según los props y el estado. Aunque existen varias formas de representación condicional, este artículo se centra en el operador && de JavaScript. La razón principal de este énfasis es que el operador && a menudo genera errores en la interfaz de usuario, que se pueden evitar fácilmente y, a menudo, no se mencionan.
Contenido
- ¿Cómo funciona el operador
&&? - ¿Por qué no usar
&&? - ¿Qué usar en lugar de
&&?
Si en algún momento el contenido que comparto te ha resultado útil, puedes nominarme a GitHub Stars en este link
Con este pequeño gesto, me ayudas a conseguir más apoyo para seguir haciendo lo que hago, compartir conocimiento.
¿Cómo funciona el operador && ?
Un ejemplo clásico de su uso en React sería:
function MyComponent({ condition }) {
return (
<div>
<h1>Title</h1>
{condition && <ConditionalComponent />}
</div>
);
}
Brevemente resumido:
- si
conditiones un valor truthy, se renderiza<ConditionalComponent /> - si
conditiones un valor falsy,<ConditionalComponent />no se renderiza
¿Porqué es eso? No es nada específico de React, sino más bien un comportamiento de JavaScript y otros lenguajes de programación llamado short-circuit evaluation. Es decir, si el primer operando (condition) es falso, el operador AND (&&) se detiene y no evalúa el segundo operando (<ConditionalComponent/>).
Puede intentarlo en su navegador ejecutando el siguiente fragmento de código 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 condición se evalúa como true o false, obtienes lo que esperas: <ConditionalComponent /> se renderiza o no, respectivamente. Todo bien hasta ahora. Sin embargo, si la condición no se evalúa como un booleano, puede causar problemas.
Por ejemplo:
- si
conditiones0, se muestra0en la interfaz de usuario - si
conditionesundefined, 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 podría estropear el diseño, use el operador ternario de JavaScript en su lugar. Es decir.
condition ? <ConditionalComponent /> : null;
Conclusión
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 lógico AND. Es un hechizo simple pero bastante irrompible 🧙♂️
🔴 BAD
condition && <ConditionalComponent />
🟢 GOOD
condition ? <ConditionalComponent /> : null
--
P.S: Si en algún momento el contenido que comparto te ha resultado útil, puedes nominarme a GitHub Stars en este link
Con este pequeño gesto, me ayudas a conseguir más apoyo para seguir haciendo lo que hago, compartir conocimiento.
Muchas gracias! 🙏🏻❤️💪🏻
This content originally appeared on DEV Community 👩💻👨💻 and was authored by Khriztian Moreno
Khriztian Moreno | Sciencx (2022-10-26T15:54:30+00:00) Deja de usar “&&” para el Conditional Rendering en React. Retrieved from https://www.scien.cx/2022/10/26/deja-de-usar-para-el-conditional-rendering-en-react/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.