Si alguna vez te has preguntado ¿qué es el estado (state) en un componente de React? y quieres aprender cómo modificar estado desde un componente clase en React, sigue leyendo.
React es una librería JavaScript que nos permite desarrollar SPA o single page application. Para ello, React ha creado una serie de elementos y funciones especiales conocidas como componentes y hooks.
Existen dos formas de declarar componentes: a través de funciones arrow function o a través de clases con la palabra clave class. Aunque ambos componentes son útiles, la forma en la que ejecutamos acciones en ellos varía. En este post, te enseñaremos cómo modificar estado desde un componente clase en React a través de la función setState.
¿Cómo modificar estado desde un componente clase en React?
En React, cambiar el valor de un estado en un componente de clase react de tipo función es muy sencillo. En su propia declaración, un estado para este tipo de componentes tiene un método con el que podemos cambiar su valor. Este método es el segundo parámetro declarado y se inicializa con set:
// usestate y useeffect
const [tweets, setTweets] = useState ([ ]);Para modificar estado desde un componente clase en React, esta librería nos da un método similar llamado setState. Entonces, usando el comando this.setState, estaremos llamando al estado declarado con this.state y modificando su valor. Dentro de este método setState, pasamos la parte del estado que queremos modificar.
Al ejecutar cualquier acción con un componente de tipo clase, deberás estar muy pendiente del comando this. Este es el que nos permite llamar al componente en el que estamos. Entonces, cuando usamos el this.setState, estamos creando un método para modificar el estado que se encuentre en este componente, ningún otro.
Supongamos que tenemos el siguiente estado, similar al que hemos creado en nuestro post sobre declarar estado en un componente clase de React:
//Modificar estado desde un componente clase en React
constructor (props) {
super (props);
this.state = {
tweet: null,
error: null,
isLoadin, false,
};
};Como puedes ver, existen varios estados dentro de un mismo objeto this.state. Entonces, cuando decidamos modificar estado desde un componente clase en React, deberemos elegir qué estado queremos cambiar. Para ello, pasamos su nombre por el objeto de setState y le asignamos un valor. Elegir una sección del estado nos permite setear solo una de sus partes.
Ya hemos definido cómo hacer la función que nos enseña como pasar un estado de un componente a otro en react. Ahora, ¿cómo lo modificamos? Pues igual que cuando declaramos este estado: basta con usar los dos puntos y asignarle un valor.
this.setState ({ tweet: 1 });
Cuando quieras usar una clave y valor con el mismo nombre, es decir, pasar tweet a la clave tweet, no es necesario escribir tweet:tweet. Con la sintaxis de React, podemos simplemente escribir tweet:
this.setState ({ tweet });
Lo que hará this.setState es generar un estado nuevo. En nuestro caso, este estado preservará los valores de error e isLoading, porque no hemos pedido que los modifique. Es decir, solo modificará el estado tweet.
En este sentido, this.setState de un estado tweet funciona exactamente igual que el método setTweets para un componente de tipo función. La diferencia entre estos métodos es que this.setState nos permite modificar solo una parte del estado. Los métodos de estado de función requieren distintas líneas useState para diferenciarse.
Para modificar más de una parte del estado dentro de un componente de clase, basta con separar los distintos estados por comas. A continuación, puedes ver un ejemplo:
this.setState ({ tweet, isLoading: false });
Al igual que con el componente de tipo función, modificar estado desde un componente clase en React genera un nuevo render. En este tipo de componentes, esto quiere decir que se ejecuta el código que esté dentro del método render, obligatorio para todos los componentes declarados con class y para renderizar componente react
Ahora que sabes cómo modificar estado desde un componente clase en React, cabe preguntarse: ¿podemos crear más de un estado en nuestros componentes de react? ¡Si quieres encontrar la solución a esta pregunta, te invitamos a utilizar este conocimiento en tus propios proyectos! Si quieres aprender más sobre cómo crear todo tipo de proyectos de programación para la web, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp.
Con este programa de formación intensiva, aprenderás todo lo que necesitas para transformarte en un experto del desarrollo web en pocos meses. ¿Te animas a seguir aprendiendo para darle un giro a tu vida y entrar en este sector de alta empleabilidad? ¡Pide más información y conviértete en un keepcoder!
