¿Sabes cómo declarar estado en un componente clase de React? React es una librería de JavaScript muy popular en el mundo de la programación, la segunda después de JQuery. Esta librería es conocida por ayudarnos a desarrollar SPA o single page application al mezclar el poder del código JavaScript con el de HTML.
Uno de los elementos más importantes dentro de esta sintaxis son los componentes React, que pueden declararse como componentes de tipo función o como componentes de tipo clase. Ambos componentes nos permiten ejecutar las mismas acciones de distintas maneras. En este post, te enseñaremos cómo declarar estado en un componente clase de React, una acción fundamental para la lógica de esta librería.
Antes de declarar estado en un componente clase de React
En nuestro post sobre estado en React, hemos aprendido que este elemento es uno de los tipos de datos que podemos insertar en esta librería. Por un lado tenemos los props, datos estáticos que insertamos en un componente.
Por el otro, tenemos los estados, datos internos del componente que cambian con el tiempo. Cuando hemos creado nuestro post sobre controlar estado login en React, te hemos enseñado a crear un estado en un componente de tipo función. A continuación, te enseñaremos a declarar estado en un componente clase de React.
¿Cómo declarar estado en un componente clase de React?
Normalmente, un estado declarado en un componente de tipo función se ve algo como lo siguiente. Allí, declaramos un estado tweets y una función que nos permite cambiar dicho estado setTweets. Luego, igualamos estos parámetros al hook useState, en el que decidimos el valor inicial del estado.
const [tweets, setTweets] = useState (null);Si quieres saber más sobre este hook, te invitamos a leer el post using the state hook en reactjs.org.
Ahora, podemos usar este mismo ejemplo en un componente de tipo clase. Usualmente, utilizamos el constructor para declarar estado en un componente clase de React. Dentro de este constructor, usamos el comando this.state para declarar nuestro estado.
constructor ( ) {
this.state = {
}
}Luego, igualamos el comando this.state al contenido de nuestro estado. Allí podemos darle un nombre al estado y asignarle un valor inicial usando los dos puntos. Es decir, los escribimos en términos de clave:valor.
constructor ( ) {
this.state = {
tweet: null,
}
}Como puedes haber visto en clases de JavaScript, antes de utilizar un constructor debemos llamar al super. Puedes ver un ejemplo de esto en nuestro post sobre herencia en JavaScript. Esto es algo común cuando las clases se extienden con la palabra clave extends.
El constructor en un componente de tipo clase suele recibir como parámetro las props. Lo normal es que llamemos al super también con estas props. Las props recibidas serán las que estén siendo pasadas a nuestro componente. A continuación, te mostramos cómo quedaría nuestro componente con este estado declarado:
class TweetPage extends React.Component {
constructor (props) {
super (props);
this.state = {
tweet: null,
};
}En nuestro caso, las props que está recibiendo este componente son las que hemos declarado en nuestro post sobre componente de clase en React.
Entonces, cuando React tiene que renderizar un componente de tipo clase, lo que hará básicamente es hacer un new de esa clase. Al instanciar esta clase, se ejecuta el constructor usando las props que le hemos pasado. Luego, el componente hará lo que deba hacer con el estado declarado.
Ten en cuenta que, si tu componente de tipo clase no necesita un estado, es mejor no declarar el componente, pues su función principal es declarar estados.
Una vez seamos capaces de declarar estado en un componente clase de React y modificarlo, nuestro componente ejecutará el render que hemos definido. Recuerda que todo componente de tipo clase debe ejecutar obligatoriamente este método render. Este método normalmente contiene lo que queremos que se muestre en pantalla.
Al leer este post, no solo has aprendido exactamente cómo declarar estado en un componente clase de React, también has dado un paso hacia dominar esta poderosa librería. Si quieres seguir aprendiendo sobre esta y otras herramientas de programación para la web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp.
Con este programa de formación intensiva, aprenderás todo lo necesario para dominar el mundo del desarrollo web en pocos meses. ¿A qué esperas para dar el siguiente paso en tu carrera laboral? ¡Solicita más información y atrévete a cambiar tu vida!
