Comunicar padres a hijos en React

Autor: | Última modificación: 15 de septiembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

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. 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. Esta es la única manera que tenemos de enviar un elemento de un padre a un hijo en React. Entonces, si el padre quiere enviar datos o funciones al hijo, 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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!