Renderizando elementos con Operadores Lógicos en React JS

4 minuto(s)

Si estas desarrollando un proyecto en React JS en ocasiones necesitas mostrar un componente a un usuario, este usuario debe cumplir ciertas condiciones para poder ver o acceder a dicho modulo, por suerte React JS nos da la opción de manejar esto sin problemas, en este artículo te enseñaremos a como hacerlo, vayamos al articulo para que nos entiendas de que hablamos.

imagen: medium.mybridge.co

En React JS podemos usar operadores condicionales para verificar si un valor cumple ciertos requisitos, podemos usar if para verificar y si cumple los requerimientos entonces que le cargue el componente o contenido en la UI.

Nota: Los códigos de ejemplo para este articulo están transpilados con Babel JS, te recomendamos leer nuestro artículo Que es Babel JS y como Instalarlo para que te familiarices con esta útil herramienta.

Por ejemplo, si un usuario no ha iniciado sesión en la aplicacion le podemos enviar un mensaje que debe iniciar sesión, pero si el usuario ha iniciado sesión entonces lo enviamos a cierta zona permitida solo a usuario registrados con su mensaje de bienvenida, veamos el codigo a continuación

Almacenando Variables

En React JS podemos usar variables para almacenar determinados elementos que nos ayudarán a mostrar ciertos elementos en nuestra vista, solo si cumples las condiciones.

Por ejemplo agregamos 2 botones en nuestra vista, uno para Iniciar Sesión y Otro para Cerrar Sesión, tambien creamos un componente llamado ControlSesion y si cumple o no las condiciones mostramos el mensaje que hicimos en el primer ejemplo:

Operador Lógico &&

Cuando estamos trabajando con JSX en React JS podemos agrupar entre llaves una expresión determinada junto con el operador lógico &&, por ejemplo:


Para entender el ejemplo, si has visto en Javascript el operador && evalúa de la mano de un true o false, entonces si la condición es true, los elementos despues del operador && se imprimirán en la vista y si es false React JS lo ignora y no lo imprime.

Operador Condicional if – else en Linea

En React JS podemos representar elementos en linea de forma condicional, esto lo podemos hacer usando el operador condicional de Javascript condicion ? true :  false

En el siguiente código puedes ver un ejemplo:

Evitar que los componentes se rendericen

A veces en un proyecto necesitamos que algunos componentes estén ocultos a la vista del usuario, con React JS lo podemos hacer, así haya sido procesado por otro componente, para esto devolvemos un valor null a la hora de renderizar el componente.

En el siguiente ejemplo vamos a mostrar una alerta si p


Cuando haces click en el botón ocultar, este retorna null y no se muestra el mensaje, esto no afecta el ciclo de vida de los demás componentes.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.