A la hora de crear cualquier proyecto de programación, sea cual sea el lenguaje que uses, habrá momentos en los que querrás compartir propiedades, lógicas y acciones entre los elementos. Esto te permitirá automatizar acciones y establecer comunicación entre los componentes de tu proyecto. En este post, te enseñaremos cómo elevar estado en React, una de las formas de comunicar hijos con padres.
¿Qué es elevar estado en React?
Cuando estamos hablando de elevar estado en React, nos referimos a una estrategia que nos permite establecer una comunicación entre los componentes hijos mediante los componentes padres en esta librería de JavaScript. En nuestro post sobre comunicar padres a hijos en React, te hemos comentado que, para pasar un dato o función de un componente padre a un componente hijo, debemos utilizar los props.
Ahora, el problema que resuelve elevar estado en React es cuando el componente hijo quiere mandar un dato a un componente hermano. En este post, ejemplificaremos este proceso con un dato flexible: un estado. A continuación, te enseñamos exactamente cómo hacer esto.
Si todavía no tienes muy claro que es un estado en React, te invitamos a leer el post estado del componente en reactjs.org.
¿Cómo elevar estado en React?
Supongamos que tenemos un estado isLogged con el que definimos si un usuario ha hecho un inicio de sesión o no. Este estado tiene dos valores posibles, false o true, y lo hemos creado en nuestro post sobre controlar estado login en React. Al ser un estado que puede afectar a toda nuestra aplicación, lo hemos creado en el componente App.js, donde renderizamos todo nuestro proyecto. ¿Por qué? Pues porque si creamos el estado dentro de un componente de menor nivel, por ejemplo, dentro de una página de login en React, tendremos problemas cuando queramos acceder a este estado desde un componente hermano.
Entonces, para elevar estado en React debemos hacer exactamente lo que dice esta frase: llevar el estado a un nivel más alto dentro de nuestro proyecto. Esto nos permitirá que dos componentes que son hermanos, como lo podrían ser las distintas páginas de nuestra aplicación, puedan acceder a este estado.
Pongámoslo en términos más sencillos. Supongamos que nuestro proyecto tiene un componente padre con dos componentes hijos, que vienen siendo hermanos por estar al mismo nivel. Entonces, el hijo A tiene un estado, que podría ser isLogged, y el componente B necesita acceder a este estado para pintar algo. Podemos pensar que este componente B quiere cambiar el diseño de un botón según el valor de este estado. El problema aquí es que no podemos establecer comunicación de hermano a hermano.
La única comunicación que podemos hacer es de padre a hijo, realizada mediante los props. Por ello, para comunicar de un hermano a otro deberemos elevar estado en React. Es decir, crear este estado en un nivel más alto, que luego pueda ser comunicado a todos los hijos que lo necesitan.
La ventaja de elevar estado en React es que, luego, podemos pasar la parte del estado que cada hijo necesite. Es decir, podemos, por ejemplo, pasarle el estado isLogged al componente B para que lo consuma y la función setIsLogged al componente A para que lo modifique.
Desde KeepCoding te recomendamos que, siempre que necesites compartir un dato o una función entre componentes, primero pienses en el diagrama de árbol que has creado en tu proyecto. Te invitamos incluso a pintar las ramificaciones de tus componentes. De este modo, podrás comprender en qué punto sería ideal elevar estado en React para que todos los hijos accedan a sus datos mediante props.
¿Te animas a seguir aprendiendo?
Ahora que sabes cómo elevar estado en React, ¡es momento de utilizar este conocimiento para manipular los componentes de tus propios proyectos! Si quieres seguir aprendiendo a desarrollar todo tipo de proyectos de programación para la web, no solo en React sino también con lenguajes como JavaScript, HTML y CSS, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp. Allí aprenderás todo lo necesario para convertirte en un experto del desarrollo web en pocos meses. ¿Te animas a seguir aprendiendo con nosotros? ¡Inscríbete ya!
