Representación condicional en React

 

Ahora vamos a aprender cómo hacer renderizado condicional en React. En otras palabras, si existe una condición, proporcionamos una información específica. Si existe una condición diferente, entonces mostraríamos una información diferente al navegador. Bueno, React no es un lenguaje de plantillas, por lo que no tenemos acceso a las directivas if o else basadas en html. No hay problema, simplemente trasladamos esa lógica a JavaScript simple. Veamos cómo hacerlo ahora.

---

Renderizar condicionalmente una lista

Lo que podemos hacer es comenzar con el ejemplo de representación de listas en el que acabamos de trabajar. Es solo una matriz simple con tres elementos, y luego usa la función de mapa para representarlos todos en el marcado JSX.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import React, { Component } from "react";   class Item extends Component {   state = {     listitems: ["List Item 1", "List Item 2", "List Item 3"]   };     render() {     return (       <React.Fragment>         <ul className="list-group">           {this.state.listitems.map(listitem => (             <li className="list-group-item list-group-item-primary">               {listitem}             </li>           ))}         </ul>       </React.Fragment>     );   } }   export default Item;

El código anterior funciona muy bien, pero ¿qué sucede si no hay elementos en la matriz? En una situación como esa, sería bueno mostrar un mensaje como "No hay elementos disponibles" o algo similar. Entonces, según la condición de que haya uno o más elementos en la matriz, mostramos la lista; de lo contrario, si no hay elementos en la matriz, deberíamos decirlo en la pantalla. Aquí hay un ejemplo de cómo podríamos hacer eso en React.

---

Usar un método auxiliar

Agreguemos un método auxiliar al componente que ayudará con esta tarea. Primero, analicemos la estructura de este método. Se parecerá un poco al siguiente.

1 2 3 4 5 6 7 8 9 10 11

renderItems() {     if (this.state.listitems.length === 0) {         // Display an empty list message       } else {         // Display the list items       }   }

Lo que estamos haciendo es comprobar primero si la matriz listitems tiene elementos. Si no tiene elementos, mostraremos ese mensaje de lista vacía. Si tiene elementos, entonces debemos mostrarlos.

---

Devolver JSX desde una función

En cualquiera de las condiciones, necesitamos devolver algo de JSX que se pueda usar en nuestra etiqueta React.Fragment. Así que este es el marcado que debería funcionar. En el primer caso, devolvemos una expresión JSX que es una alerta de Bootstrap. En el otro caso, simplemente movemos la lógica para representar una lista en esta función y la devolvemos.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

renderItems() {     if (this.state.listitems.length === 0) {       return (         <div class="alert alert-warning" role="alert">           There are no items to list!         </div>       );     } else {       return (         <ul className="list-group">           {this.state.listitems.map(listitem => (             <li className="list-group-item list-group-item-primary">               {listitem}             </li>           ))}         </ul>       );     }   }

---

Llamar a una función en JSX

Ahora que hemos movido el JSX a una función que decidirá cómo renderizar la lista, necesitamos incluir una llamada a esa función. Hacemos la llamada a nuestra nueva función dentro de la función render () del componente así.

1 2 3

render() {   return <React.Fragment>{this.renderItems()}</React.Fragment>; }

---

Probando el renderizado condicional

Entonces, si lo juntamos todo, podemos ver cómo funciona esto. Primero, llenaremos nuestra matriz listitems con cuatro elementos de lista individuales.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import React, { Component } from "react";   class Item extends Component {   state = {     listitems: ["List Item 1", "List Item 2", "List Item 3", "List Item 4"]   };     renderItems() {     if (this.state.listitems.length === 0) {       return (         <div class="alert alert-warning" role="alert">           There are no items to list!         </div>       );     } else {       return (         <ul className="list-group">           {this.state.listitems.map(listitem => (             <li className="list-group-item list-group-item-primary">               {listitem}             </li>           ))}         </ul>       );     }   }     render() {     return <React.Fragment>{this.renderItems()}</React.Fragment>;   } }   export default Item;

En este escenario, la lista se representa con 4 elementos. Perfecto.

Ahora, vacíemos la matriz. Necesitamos ver si la lógica en la función renderItems () está funcionando correctamente.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

import React, { Component } from "react";   class Item extends Component {   state = {     listitems: []   };     renderItems() {     if (this.state.listitems.length === 0) {       return (         <div class="alert alert-warning" role="alert">           There are no items to list!         </div>       );     } else {       return (         <ul className="list-group">           {this.state.listitems.map(listitem => (             <li className="list-group-item list-group-item-primary">               {listitem}             </li>           ))}         </ul>       );     }   }     render() {     return <React.Fragment>{this.renderItems()}</React.Fragment>;   } }   export default Item;

Parece que ahora estamos recibiendo el mensaje de lista vacía que es exactamente lo que queremos.

---

Representación condicional en resumen de React

Este es solo un ejemplo de cómo puede abordar el renderizado condicional al usar React. Nuevamente, dado que no hay directivas personalizadas como ng-if o v-if, debemos recurrir a JavaScript nativo para implementar la lógica sobre si se debe representar una pieza de información u otra. ¡Si nada más, estaremos mejorando nuestras habilidades nativas de JavaScript usando esta técnica!