Modificar estado desde un componente clase en React

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

¿Quieres aprender cómo modificar estado desde un componente clase en React? 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 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:

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:

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 permite modificar estado desde un componente clase 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.

¿Qué sigue?

Ahora que sabes cómo modificar estado desde un componente clase en React, ¡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!

👉 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]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿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!