¿Cómo actualizar un objeto con setState en ReactJS?

Podemos actualizar un objeto en React usando el método setState(). Cada componente en React hereda el método setState() de su nombre de componente Base Component. El método setState() le dice a React que estamos actualizando el estado, luego averiguará qué parte del estado ha cambiado y, en función de eso, sincronizará el DOM con el DOM virtual.  

Pasamos un objeto en el método setState() como argumento. Las propiedades de ese objeto se fusionarán con lo que tenemos en el objeto de estado o anularán esas propiedades si ya existen. 

Creando la aplicación React:

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

npx create-react-app foldername

Paso 2:  después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Aplicación.js

import React, { Component } from "react";
class App extends Component {
  
  // Object with one property count
  state = {
    count: 0
  };
  
  // Method to update the object
  handleIncrement = () => {
    // Updating the object with setState() method
    // by passing the object and it will override
    // the value of count property
    this.setState({ count: this.state.count + 1 })
  }
  
  render() {
    return (
      <div style={{display: 'block', width: 40, margin: 'auto'}}>
        <h1><span>{this.state.count}</span>
        </h1>
        <button onClick={this.handleIncrement}
        >Increment </button>
      </div>
    );
  }
}
  
export default App;

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

npm start

Salida: Haga clic en el botón de incremento para aumentar el valor de la cuenta.

Salida del código anterior