¿Cómo actualizar las propiedades de estado anidado en ReactJS?

Existen los siguientes enfoques para actualizar las propiedades de estado anidado en ReactJS:

• Enfoque 1: podemos crear un objeto ficticio para realizar operaciones en él (actualizar las propiedades que queremos) y luego reemplazar el estado del componente con el objeto actualizado.
• Enfoque 2 : podemos pasar el antiguo objeto anidado usando el operador de extensión y luego anular las propiedades particulares del objeto anidado.

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

Enfoque 1: App.js

import React, { Component } from "react";
class App extends Component {
  
  // Nested object
  state = {
    name: 'kapil',
    address: {
      colony: 'vaishnav nagar',
      city: 'Jaipur',
      state: 'Rajasthan'
    }
  };
  
  handleUpdate = () => {
    // Creating a dummy object using spread operator
    var address = { ...this.state.address }
  
    // Updating the city
    address.city = 'Kota';
    this.setState({ address })
  }
  
  render() {
    return (
      <div style={{ margin: 200 }}>
        <h1>{this.state.name}</h1>
        <h1>{this.state.address.colony} {","}
          {this.state.address.city}{", "}
          {this.state.address.state}</h1>
        <button
          onClick={this.handleUpdate}
        >UpdateCity </button>
      </div>
    );
  }
}
  
export default App;

Enfoque 2: App.js

import React, { Component } from "react";
class App extends Component {
  
  // Nested object
  state = {
    name: 'kapil',
    address: {
      colony: 'vaishnav nagar',
      city: 'Jaipur',
      state: 'Rajasthan'
    }
  };
  
  handleUpdate = () => {
    // Overriding the city property of address object
    this.setState({ address: { ...this.state.address, city: "kota" } })
  }
  
  render() {
    return (
      <div style={{ margin: 200 }}>
        <h1>{this.state.name}</h1>
        <h1>{this.state.address.colony} {","}
          {this.state.address.city}{", "}
          {this.state.address.state}</h1>
        <button
          onClick={this.handleUpdate}
        >UpdateCity </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

Producción: