How to set an object key inside a state object in React Hooks?

We can update a React hooks state object that has a nested object containing objects with index keys with the following approach, Before doing so, consider the following example:

Example: Following is the default state object:

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

Following is the desired output after updating a nested object:

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

Solution: We can use the below syntax to set an object key inside a state object:

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

Creating React Application:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Filename: App.js

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: 

• Following will be the output before clicking the button:

  

  Before Click

• Following will be the output after clicking the button:

  

  After Click