Props en React - Solution
Props en React
En este ejericio ya dejamos de lado el uso de la API createElement y de utilizar elementos HTML y comenzamos a crear componentes React.
En este primer ejercicio debes crear un componente que recibe ciertas props para ser luego desplegadas.
Un componente en React es sólo una función que recibe un único argumento llamado props. Este argumento es un objeto que es después expuesto en JSX como atributos del componente.
Todo componente React retorna algo que pueda ser renderizado, eso incluye arreglos, texto, null, elementos html y más JSX.
Finalmente, le indicas a React que renderice el componente padre <ParentComponent /> que a su vez renderizará <UserInfo> que finalmente renderizará el elemento <p> creando un árbol de componentes.
Credit Extra
Considera que tienes un objeto con varios atributos, ¿cómo puedes pasar ese objeto directamente como props a tu componente?
El proceso de pasar props puede ser tedioso, pero hay formas de escribir la misma lógica de forma más concisa: Destructuring.
Recuerda que un componente React es una función que recibe un sólo argumento tipo objeto y que JSX es una forma declarativa de escribir React.createElement(tipo, props).
Considerando eso, puedes hacer uso de la sintaxis spread de Javascript para pasar un objeto directamente {...obj}.
Transcripción
Comencemos revisando nuestro archivo index.html de la lección número 5. Vemos que tenemos todo lo que necesitamos para iniciar, así que simplemente necesitamos comenzar con nuestro código.
Lo primero es crear un componente que muestre la información de usuario y utilizarlo dentro de este parent component. Aquí están los valores que queremos mostrar dentro de user info, que es lo primero que tendremos que hacer. Para comenzar, vamos a utilizar user info dentro de parent component. Para eso utilizamos JSX, simplemente escribimos user info y cerramos la etiqueta.
Ahora, ¿cómo user info recibe estos valores? A través de las props. Para eso aceptamos un solo argumento llamado props, o cualquier nombre que gusten. Utilizamos destructuring para destructurar, separar los elementos o tributos de props. Note que en vez de utilizar teléfono, utilizamos still. Retornamos ahora a una etiqueta p y utilizamos interpolación para poder renderizar los valores que están dentro de las variables nombre, email y tel.
Pero ahora nada se ve en pantalla aún, solo podemos ver los guiones que están aquí, porque no le hemos pasado ninguna prop a nuestro componente user info. Ahora, agregaremos nuestras props. Nuestras props tienen nombre, que tendrá el valor nombre, la prop email, que tendrá el valor email, y la prop tel, que tendrá el valor teléfono.
Es decir, no es necesario que la variable tenga el mismo nombre que la prop que recibe el componente user info. Ahora, para nuestro crédito extra, consideremos que tenemos varios atributos. ¿Cómo los podemos pasar directamente a las props? Es decir, tenemos nombre, email y teléfono. ¿Cómo lo podemos hacer de manera rápida y sencilla, evitando escribir tantas veces nombre, nombre, email, teléfono?
Pensemos que tenemos un objeto que mantiene todos estos valores nombre, email y teléfono. Ahora, podemos utilizar el operador spread para pasar todo el objeto como props. No te sé que todavía no podemos ver el teléfono, eso es porque nuestro objeto tiene el atributo teléfono, pero nuestra prop estamos utilizando un atributo llamado tel, que no existe.
Si lo cambiamos por teléfono, podremos ver que se renderiza exitosamente. Además, podemos también destructurar nuestras props directamente en el argumento, dejando así la función de nuestro componente más concisa.