¿Cómo administrar localmente el estado del componente en ReactJS?

Estado local del componente: cualquier componente ReactJS depende principalmente de sus accesorios y estado para administrar los datos. El estado de un componente es privado para él y es responsable de gobernar su comportamiento a lo largo de su vida. Un estado no es más que una estructura que registra cualquier cambio de datos en una aplicación de reacción. Se puede usar para almacenar valores, entradas de formulario, datos de una API, etc. Este estado local administrado dentro de un componente no puede verse afectado por otros componentes.

Enfoque: para administrar localmente el estado de un componente en un componente basado en clases, instanciamos un objeto de estado local, que contiene todas las variables de estado que necesitamos usar en el componente. Estas variables de estado locales se pueden actualizar mediante la función setState. Es importante cambiar el estado local solo con la función setState, ya que solo entonces React activará una nueva representación del componente, lo cual es esencial para actualizar el estado de la aplicación.

Cree una nueva aplicación React:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app react-local-state

 

• Paso 2: después de crear la carpeta de su proyecto, es decir, react-local-state, muévase a ella con el siguiente comando:

  cd react-local-state

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: Veamos un ejemplo para comprender cómo administrar localmente el estado de un componente. En nuestro ejemplo, consideraremos un valor que se inicia como 0. Podemos actualizar este estado de «valor» incrementándolo (aumentando en 1) o disminuyéndolo (disminuyendo en 1). Ahora, para aumentar o disminuir este valor, usaremos la función setState para activar una nueva representación del componente que garantice que cualquier actualización de nuestro estado (valor) se reflejará en la pantalla.

import React, { Component } from "react";
import "./App.css";
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { value: 0 };
  }
  
  incrementValue = () => {
    this.setState((state) => ({
      value: state.value + 1,
    }));
  };
  
  decrementValue = () => {
    this.setState((state) => ({
      value: state.value - 1,
    }));
  };
  
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h3>Local State in ReactJS</h3>
          <h5>The value managed locally is: {this.state.value}</h5>
          <div>
            <button onClick={this.incrementValue}>
               Increment!
            </button>{" "}
            <button onClick={this.decrementValue}>
               Decrement!
            </button>
          </div>
        </header>
      </div>
    );
  }
}
  
export default App;

Paso para ejecutar la aplicación:   Ejecute la aplicación usando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/, verá la siguiente salida: