Renderizado Condicional
Una interfaz es la forma de representar datos en la pantalla para facilitar la interpretación de parte del usuario y también para permitir interactuar con esos datos. Es común que en dependiendo de alguna acción del usuario o de alguna particularidad de los datos quieras no mostrar ciertos componentes, es decir, querrás renderizar tus componentes de forma condicional.
Lograr esto es relativamente sencillo, sólo es necesario recordar que JSX no es un lenguaje de templates, si no, una forma más expresiva de realizar llamadas a la función React.createElement. También es adecuado que recuerdes que cada vez que quieras evaluar una expresión debes utilizar interpolación.
Existen dos formas de lograr un rederizado condicional:
- operador ternario
- operadores lógicos
Es recomendable utilizar bloques condicionales u el operador ternario ya que el uso de simples operadores lógicos puede traer resultados inesperados
¿Qué ocurre si evalúas la siguiente operación? 0 && algunaFuncionQueRetornaUnNumero()🐾 Primeros Pasos
En esta lección revisaremos como renderizar componentes de forma condicional, es decir, definir cuando ser renderiza o no cierto componente.
Para esto definiremos el siguiente ejemplo.
Una página de perfil de usuario que muestra sus contactos
🎯 Objetivos
- Conocer los 2 métodos para renderizar componentes de forma condicional.
- Conocer las limitaciones y resultados de cada método.
- Reconocer por que no se puede utilizar un bloque condicional
if - Ejercitar interpolación
🏋️♂️ Ejercicios
- Renderiza el componente
<NoContacts>sólo cuando el atributocontactsestá vacío utilizando un operador lógico - Lo mismo pero utizando el operador lógico
&&
🍬 Crédito Extra
- Intenta utilizar un bloque condicional
if-else. ¿Cuál es el resultado? ¿Por qué?
Transcripción
En esta lección, revisaremos el renderizado condicional.
Cuando estamos trabajando en una interfaz, la idea es representar datos en la pantalla que permitan la interpretación del usuario. Para esto, es necesario muchas veces que, dependiendo de algún dato, queramos mostrar o esconder cierta información. Ósea, tengamos formas condicionales de renderizado.
Para lograr esto, que es relativamente sencillo, tenemos que recordar que JSX no es un lenguaje de templates, sino una forma expresiva de ejecutar React.createElement.
Existen dos formas de lograr los renderizados condicional -- operadores ternarios y operadores lógicos. Es recomendable utilizar el operador ternario, ya que es más expresivo.
El objetivo es conocer los dos métodos de renderizar componentes de forma condicional a través de estos ejercicios -- renderizar un componente que muestra no contactos cuando no hay contactos, y al revés, utilizando tanto el operador lógico como el operador ternario.
Tenemos un crédito extra que revisaremos en su momento.