There are the following approaches to update nested state properties in ReactJS:
- Approach 1: We can create a dummy object to perform operations on it (update properties that we want) then replace the component’s state with the updated object.
- Approach 2: We can pass the old nested object using the spread operator and then override the particular properties of the nested object.
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
Project Structure: It will look like the following.
Project Structure
Approach 1: App.js
Javascript
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; |
Approach 2: App.js
Javascript
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; |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
