Skip to content
Related Articles

Related Articles

How to update nested state properties in ReactJS?
  • Last Updated : 28 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


Approach 2: App.js

Javascript

filter_none

edit
close

play_arrow

link
brightness_4
code

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;

chevron_right


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

npm start

Output:

react-js-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :