Utilizando el State de React

Introducción

Hasta ahora solo hemos utilizado Props dentro de nuestros componentes. Las Props son Read-Only, como los parámetros de una función. Por lo tanto, hasta ahora es perfecto para construir sitios estáticos, pero claramente no siempre es el caso deseado.

La forma para que los componentes y sitios desarrollados con React sean más interesantes, y que se conviertan en sitios dinámicos, que cambian su información a lo largo del tiempo, es utilizando un nuevo concepto de React llamado state (estado).

State

El state permite que los componentes de React modifiquen su output a lo largo del tiempo en respuesta a acciones del usuario, a respuestas de la red, y cualquier otro evento, sin violar la regla de que tienen de actuar como funciones puras con respecto a sus props.

Es un simple objeto JavaScript que contiene las variables necesarias para el componente, por lo tanto a partir del state y las props, el componente determina qué UI (User Interface) renderizar.

Props vs State

Las props son definidas en el momento que se crea el componente, ya sea por JSX o por JavaScript. Son simplemente un parámetro que recibe la función que crea nuestro componente. El state, solo vive dentro de nuestro componente, es un dato privado de los class component. Esa es la principal diferencia entre props y state.

Cuando pensamos en props, pensamos en datos de iniciación de un componente. Cuando pensamos en state, pensamos en datos internos del componente que pueden cambiar y modificar su comportamiento. Un componente no puede modificar el valor de sus props, pero si el de su state.

Como se mencionó anteriormente, el estado local es una característica que sólo tienen los componentes de tipo Class (Stateful Components). Es una práctica común crear un Functional Component y que más adelante haya que convertirlo en un Class Component por necesidad de manejar estado.

Manejando el State

La forma de declarar el state inicial en un componente es mediante el constructor, que no es propio de React sino de la class de JavaScript introducida en ES6. Es importante notar que este es en el único lugar donde se va a asignar el state con un simple =

Para acceder al valor de state se puede hacer a través de la palabra clave this

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            description: 'Soy un ejemplo'
        };
    }
    render() { 
        return (
            <div>
                <div> Hello World! </div> 
                <div> Description: {this.state.description} </div>
            </div> 
        )
    }
}

setState

Como se mencionó anteriormente, no es posible actualizar el state simplemente utilizando la asignación con =

Si queremos modificar los valores dentro del state, lo haremos utilizando el método setState de React, que recibe un objeto con el cual actualiza el estado del componente. Sólo actualiza las propiedades que contiene el objeto pasado por parámetros, por lo que no es necesario que contenga las propiedades que no se modificaron.

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            description: 'Soy un ejemplo',
            comment: 'Comentario inicial'
        };
    }
    changeComment = () => {
        this.setState({
            comment: "Comentario actualizado"
        });
    }
    render() { 
        return (
            <div>
                <div> Hello World! </div> 
                <div> Comment: {this.state.comment} </div>
                <div> Description: {this.state.description} </div>
                <button onClick={this.changeComment}> Cambiar Comentario </button>
            </div> 
        )
    }
}

Practico

Para este ejercicio, partan del archivo 'step3_App.js' que se encuentra dentro de la carpeta base_steps. Copien el contenido a App.js y corran el proyecto.

Tenemos un componente Counter que no actualmente funciona. Se necesita que Counter deje de ser un functional component, para que tenga estado y sea quien maneje el valor a mostrar, para que funcione como un contador cuando se presione el botón y aumente su propio valor.

1. Primero se debe definir Counter como una subclase de Component, con su método render, y cambiar props por this.props, y verificar que sigue funcionando.

2. Definir un constructor con el estado inicial, determinando qué estado necesita manejar Counter.

3. Dejar de mostrar el valor recibido por props, y cambiarlo por el del estado local.

4. Implementar un método para actualizar el valor del contador con el onClick del botón.

5. Apliquemos un poco de Styling para que el botón se vea mas lindo, y al centro de la pantalla. Algo similar a la siguiente imagen, o como ustedes prefieran.

Counter