En React, hay muchos momentos en los que queremos pasar funciones, propiedades y elementos entre varios componentes. Esto nos permite ejecutar diversas acciones, desde hacer que dos componentes tengan las mismas propiedades de estilo, hasta conseguir que un estado definido en un componente llegue a otro. En este post, te enseñaremos cómo comunicar padres a hijos en React para pasar todo tipo de elementos entre estos componentes.
¿Qué es comunicar padres a hijos en React?
Cuando hablamos de comunicar padres a hijos en React, estamos hablando de crear una vía para pasar elementos en dos direcciones.
Entonces ¿cuál es el objeto utilizado para pasar datos de padre a hijo react ?
Como en cualquier comunicación, al comunicar padres a hijos en React podemos pasar un elemento de un padre a un hijo o de un hijo a un padre. En este post, te enseñaremos cómo establecer una comunicación de un componente padre a un componente hijo.
Para ejemplificar cómo comunicar padres a hijos en React, podemos pensar en el estado del que hemos hablado en nuestro post sobre controlar el estado login en React. En este post, hemos creado un estado isLogged para definir cuando un usuario ha hecho su inicio de sesión. A continuación, te mostramos la línea de código que nos permitió crear este estado:
const [isLogged, setIsLogged] = useState (false)
Supongamos que este estado ha sido definido desde nuestro archivo App.js, uno de los archivos de nivel más alto en nuestro proyecto. Hemos tomado la decisión de definir el estado en este archivo porque nos permitirá usarlo para impactar todas las páginas de nuestra aplicación. Aquí es donde entra el tema de nuestro artículo.
Las páginas hijas del componente App deben usar la función setIsLogged para establecer el valor del estado isLogged según lo que sucede dentro de ellas. ¿Cómo hacemos para que un archivo hijo de otro tenga acceso a las funciones del padre? A continuación te lo explicamos.
¿Cómo comunicar padres a hijos en React?
Para poder comunicar padres a hijos en React, debemos hacer uso de la vía de comunicación que nos da esta librería de JavaScript: los props. Entonces hoy veremos cómo en react pasar props de hijo a padre. Esta es la única manera que tenemos de enviar un elemento de un padre a un hijo en React. Entonces, si queremos pasar props de hijo a padre react, debemos hacerlo mediante props.
Siguiendo el ejemplo que manejamos anteriormente, podemos comunicar padres a hijos en React pasando un prop como parámetro de nuestro componente hijo. Esto lo hacemos con el uso de las llaves { }, puestas justo después de la declaración de componente. Aquí puedes manejar tus componentes como quieras, ya sean de tipo clase o de tipo función. Para conocer más sobre declarar este elemento, te invitamos a leer nuestro post sobre componentes en React.
Este prop lo podemos llamar como queramos, mientras que sea el mismo nombre que el prop declarado en el componente padre.
Desde KeepCoding te recomendamos manejar las funciones desde una variable, es decir, si debes pasar una función como parámetro de otra, te sugerimos guardar dicha función en una variable (sea con const, var o let). Luego, podrás llamar al nombre de esta variable para insertar la función. Esta es una buena práctica para reciclar código y mantener tu render limpio. Puedes ver esta estrategia en práctica en nuestro post sobre automatizar evento onChange en React.
¿Quieres seguir aprendiendo?
Ahora que sabes cómo comunicar padres a hijos en React, ¡tienes el conocimiento para crear y compartir propiedades entre los componentes de tu aplicación! Como has notado, React es una librería muy extensa que nos permite ejecutar todo tipo de acciones. Por ello, te invitamos a seguir aprendiendo sobre las posibilidades de React en nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde, además, aprenderás a dominar lenguajes de programación como JavaScript, HTML y CSS. ¿A qué esperas para inscribirte? ¡Anímate a seguir aprendiendo con nosotros!
