0:00 Para resolver los dos primeros ejercicios, abriremos nuestro archivo index.html donde podremos ver que tenemos una lista de contactos de usuario o algunos componentes que renderizan ciertas piezas y un poco de estilo.

0:10 No nos centraremos en aquello en este momento. Tenemos dos objetos, un usuario que tiene contactos, un atributo llamado contactos que es un arreglo, y un usuario que no tiene contactos cuyo atributo contactos está vacío.

0:21 Tenemos un componente llamado contacts que simplemente itera y renderiza una lista de contactos y un componente llamado no contacts y tenemos otros dos componentes que ejecutan los dos ejercicios, uno utilizando el operador alternario y otro utilizando un operador lógico como doble ampersand.

0:40 Comenzaremos por revisar que tenemos nuestro componente app que se renderiza como vemos en pantalla y vemos que hay dos llamados, uno render user with ternary mostrando el usuario con contactos y render user with logic utilizando el usuario sin contactos.

0:55 Revisamos primero render user with ternary recibe una prop llamada user y utilizaremos este formato para renderizar props user.contacts y revisamos la condición que es el tamaño de contactos si ésta es mayor que cero implica que hay contactos.

1:11 Utilizamos el signo de pregunta para decir cuál es la condición que se renderizará si es verdadero. Renderizamos nuestro componente contactos y qué pasa si es falso renderizamos el componente no contacts. Podemos ver entonces en pantalla que se renderiza el usuario 1 que tiene contactos. Para el usuario 2 cambiaremos aquí el componente y utilizaremos render users with ternary pero utilizaremos el usuario sin contactos y vemos en pantalla que se renderiza el componente no contacts.

1:40 Ahora copiaremos esto pero utilizaremos render user with logic es decir utilizaremos el operador lógico para renderizar condicionalmente editamos el nombre aquí with logic y tenemos dos componentes que renderizan el usuario con y sin contactos. Ahora vamos a ver cuál es la lógica de este componente.

2:00 En vez de utilizar el operador ternario utilizaremos este formato utilizando la interpolación agregamos la condición y si es verdadera se renderiza lo que está a su lado derecho ampersand ampersand el componente contacts con la props contacts. Esto es verdadero porque cuando el arreglo no está vacío es considerado un valor thruty.

2:23 Ahora el problema es que no podemos renderizar la opción de no contactos porque no tenemos explícito eso. Utilizamos este formato utilizando false no contacts y vemos que tampoco tenemos resultado. Tenemos que rectificar nuestra condición. La condición que utilizaremos será revisar el tamaño de la propiedad length.

2:46 Si length es menor o igual que cero es decir que no hay contactos en este arreglo. Por lo tanto la condición sería verdadera y se renderizaría el
valor del lado derecho del operador es decir no contacts. Ahora tenemos que utilizar dos condiciones para poder renderizar dos componentes. Es mucho más expresivo el operador ternario.

3:09 Ahora revisaremos nuestro crédito extra que básicamente es crear un componente utilizando renderización condicional pero utilizando un bloque if health. ¿Qué ocurre y por qué? Esta es la idea que queremos averiguar. Para esto creamos un nuevo componente que llamaremos simplemente render with if else. Aceptará las props que en este caso será el usuario con sus contactos y retornará lo mismo que teníamos en los componentes anteriores, un contenedor y un título.

3:35 Y ahora utilizaremos interpolación y trataremos de utilizar un bloque if else. If prop.user.contacts es decir el atributo contacto de la prop user tiene un tamaño mayor que cero entonces deberíamos retornar o renderizar de alguna forma este componente contactos. En caso contrario else renderizamos el componente no contacts. Claramente aquí hay algún problema. VS Code nos dice por todos lados que hay un error.

4:04 Trataremos de renderizarlo simplemente lo agregamos aquí abajo render with if else. Pasamos la prop correcta y vemos que esta pantalla se va a blanco y tenemos un error. Dice que Babel no sabe qué hacer con esto porque if else no es una expresión por tanto no puede retornar valores. Si lo sacamos desde el return podemos ver que sí funciona pero perdemos el contenedor y el título porque retorna antes.

4:33 Vamos a agregar la versión de sin contactos pero seguimos sin tener el contenedor y el título. Estamos retornando antes. Lo que podemos hacer es crear una función interna que utilice el bloque if else y nos retorna un componente en particular. Y ahora utilizando interpolación llamar esa
función dentro de nuestro return dentro del renderizado de nuestro componente y tenemos el mismo resultado. Utilizar if else es muy bueno en este formato con una función auxiliar cuando las condiciones son muy complejas. En caso contrario el operador teclinario es suficiente.