TypeScript / React – estados

Bienvenidos sean a este post, hoy veremos otra manera de interactuar con los componentes.

En este post mencionamos como manejar las propiedades de un componente y en este otro post vimos como manejar los eventos tambien. Pero tambien tenemos la posibilidad de manejar los componentes mediante su estado. La principal diferencia entre los propiedades de un componente y los estados es que las propiedades son manejadas por el componente padre y los estados son por el componente mismo.

Para analizar este tema vamos a necesitar del proyecto que vimos en el post anterior, sino lo poseen les dejo un link para descargarlo:

Extraigan el directorio en el PC y ya esta listo para usarse. Nuestro primer paso sera ir a App.tsx en el directorio src y modificaremos el codigo de la siguiente manera:

import React from 'react';
import './App.css';
import { MiBoton } from './MiBoton';

export interface IAppProps { };
export interface IAppEstado {
        detalles: boolean;
}

class App extends React.Component<IAppProps, IAppEstado> {
        constructor(props: IAppProps) {
                super(props);
                this.manejarClick=this.manejarClick.bind(this);
                this.state = { detalles: false };
        }
        render() {
          return (
            <div>
                <p>detalles =
                        {this.state.detalles ? "true" : "false"}
                </p>
                <MiBoton
                        nombreBoton="Haz click"
                        manejadorClick={this.manejarClick}/>
            </div>
          )
        }
        manejarClick() {
                console.log("App.manejarClick fue llamado");
                this.setState({ detalles: !this.state.detalles });
        }
}

export default App;

La primera modificacion sera agregar una nueva interfaz llamada IAppEstado, la cual usaremos para manejar el estado de nuestro componente. En ella tenemos una sola propiedad que se llama detalles y sera de tipo boolean. Lo siguiente sera aplicarla como tipo a Component junto a IAppProps y en el constructor agregaremos la siguiente linea:

this.state = { detalles: false };

Esta se encarga de establecer al estado, state, y tendremos a la propiedad que declaramos en la interfaz nueva y a esta le estableceremos un valor inicial. La siguiente modificacion es en render, donde envolveremos con un div al boton y arriba de este agregaremos un parrafo para mostrar el valor de detalles. En este caso, utilizamos a this para que sea el objeto actual, le indicamos que es el estado y luego la propiedad relacionada a esta. Pero a este estado le aplicamos un operador condicional donde si posee un valor true, pasara el texto para poder ver en pantalla el valor de true y en caso contrario mostrara el mensaje de false. La siguiente modificacion es manejarClick, donde al momento de hacer click en el boton usaremos a setState. Este se encarga explicitamente de modificar el valor en state y aqui cambiaremos el valor de detalles simplemente aplicando el operador Not al valor que posea, convirtiendo en false al valor true y viceversa. Con esto podemos pasar a probarlo, veamos como funciona mediante el siguiente video:

En el video podemos ver como no solo muestra el valor de detalles sino como lo alterna y muestra cada vez que presionamos el boton. Esta es otra forma de poder monitorear nuestros componentes y permitirnos actualizarlo cuando sea necesario.

En resumen, hoy hemos visto estados, que son, como se aplican, diferencias con las propiedades, y lo aplicamos en un ejemplo para ver como trabaja. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.