¿Cómo establecer una clave de objeto dentro de un objeto de estado en React Hooks?

Podemos actualizar un objeto de estado de ganchos de React que tiene un objeto anidado que contiene objetos con claves de índice con el siguiente enfoque. Antes de hacerlo, considere el siguiente ejemplo:

Ejemplo: El siguiente es el objeto de estado predeterminado:

const [data, setData] = useState({
   name:'',
   contact:'',
   address:{
     0:{},
     1:{},
   }
})

El siguiente es el resultado deseado después de actualizar un objeto anidado:

{
  name:'',
  contact:'',
  address:{
    0:{"city":'jaipur'},
    1:{},
  }  
}

Solución: podemos usar la siguiente sintaxis para establecer una clave de objeto dentro de un objeto de estado:

data.address[0].city = 'jaipur';
setData({...data});

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

Nombre de archivo: App.js

import React, { Component, useState } from "react";
  
const App = () => {
  const [data, setData] = useState({
    name: '',
    contact: '',
    address: {
      0: {},
      1: {},
    }
  })
  
  const handleUpdate = () => {
    data.address[0].city = 'jaipur';
    setData({ ...data });
  }
  
  return (
    <div >
      <button
        style={{ margin: 100 }}
        onClick={() => { handleUpdate() }} >
        change state
      </button>
      { data.address[0].city + " "}
    </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: 

• La siguiente será la salida antes de hacer clic en el botón:

  

  Antes de hacer clic

• La siguiente será la salida después de hacer clic en el botón:

  

  Después de hacer clic