Estado del Componente
Usar los datos que retiene un componente
Cada uno de componentes puede definir un objeto a nivel clase llamado state. Dicho objeto se va a encargar de almacenar variables que utilice el componente tales como, por ejemplo lo que se está escribiendo en una caja de texto, los datos que se recuperan de un servidor, etc.
Cada que el estado interno se actualiza mediante setState({...}) el componente se volverá a pintar según su método render reflejando los cambios del estado del componente, por ejemplo, vea y analice el siguiente código.
El resultado es similar a las siguientes pantallas.
Observa que cada que la caja cambia su valor, el estado en la clave texto se modifica al valor de la caja y se vuelve a pintar el componente, ahora con la nueva información del estado, haciendo que la etiqueta <p> cambie su valor en el mensaje Escribiendo: ....
Podemos utilizar los estados internos para retener información que se alimente automáticamente de un servidor o basado en un intervalo de callbacks por ejemplo.
El resultado será similar al siguiente.
En el siguiente ejemplo se crea un componente que muestra un formulario falso de inicio sesión si el estado interno this.state.isLogin es falso. De lo contrario regresa un mensaje de bienvenida.
Observa que al pulsar el botón se supone que inicio sesión correctamente (sin validar nada) y cambia el estado isLogin a verdadero. El resultado es similar al siguiente.
Y al iniciar sesión, el mensaje de bienvenida.
Otro componente que podemos construir basado en los estados es una galería sencilla de imágenes.
El resultado será similar al siguiente.
Si movemos el <input type="range" ... /> el resultado será.
Una variación de la galería es la siguiente.
Conclusiones
El estado interno de un componente nos va a permitir retener información que sea utilizada para determinar la vista de un componente (por ejemplo en Login), podemos utilizarlo para determinar que imagen está seleccionada en una galería o incluso utilizar el estado interno para pintar relojes o elementos dinámicos.
No puedes modificar this.state.x = “hola”, para hacerlo tienes que utilizar this.setState({ x: "hola" }). Es decir, this.state es sólo de lectura (recupera el estado del componente pero no deja modificarlo, sólo se puede modificar mediante this.setState(...)).
Si te gustó esta entrega no olvides aplaudir y si deseas puedes aportar alguna donación por medio de paypal.
