by Sai gowtham

How to update an object with setState in React

In this tutorial, we are going to learn about how to update the object properties with a setState method in react.

Consider we have a react component like this.

App.js
import React,{Component} from "react";

class App extends Component{

   state ={
      user: {          name: "John",          age: 19,          active: true      }   }

  render(){
      const {name, age} =  this.state.user;

      return(
          <div>
            <p>{name}</p>
            <p>{age}</p>
            <button>Update age</button>
          </div>
      )
  }
}

export default App;

Now, we need to update the user object properties by calling a setState() method.

Updating the object properties

To update the object properties, we need to use the spread operator in setState method.

Example:

App.js
class App extends Component {
  state = {
    user: {
      name: "John",
      age: 19,
      active: true
    }
  };

  handleAge = () => {
    this.setState({
      user: {        ...this.state.user,        age: 29      }    });
  };

  render() {
    const { name, age } = this.state.user;
    return (
      <div>
        <p>{name}</p>
        <p>{age}</p>
        <button onClick={this.handleAge}>Update age</button>
      </div>
    );
  }
}

export default App;

In the above code, we first initialized a new object then added a copy of the user object using spread operator (...user) and finally we updated the age property with a value 29.

Similarly, we can also use the updater function inside a setState method.

this.setState((state,props)=>{
    return {
        user: {
            ...state.user,
            age: 29
        }
    }
})

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
26,545 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
221,520 students enrolled
44 hours of video content
View Course
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
114,575 students enrolled
21 hours of video content
View Course