Updating an object with setState in React

reactjs state
JohnSnow picture JohnSnow · Apr 26, 2017 · Viewed 323.8k times · Source

Is it at all possible to update object's properties with setState?

Something like:

this.state = {
   jasper: { name: 'jasper', age: 28 },
}

I have tried: 

this.setState({jasper.name: 'someOtherName'});

and this:

this.setState({jasper: {name: 'someothername'}})

The first results in a syntax error and the second just does nothing. Any ideas?

Answer

Mayank Shukla picture Mayank Shukla · Apr 26, 2017

There are multiple ways of doing this, since state update is a async operation, so to update the state object, we need to use updater function with setState.

1- Simplest one:

First create a copy of jasper then do the changes in that:

this.setState(prevState => {
  let jasper = Object.assign({}, prevState.jasper);  // creating copy of state variable jasper
  jasper.name = 'someothername';                     // update the name property, assign a new value                 
  return { jasper };                                 // return new object jasper object
})

Instead of using Object.assign we can also write it like this:

let jasper = { ...prevState.jasper };

2- Using spread operator

Related questions

React: how to update state.item[1] in state using setState?

I'm creating an app where the user can design his own form. E.g. specify name of the field and details of which other columns that should be included. The component is available as a JSFiddle here. My initial state …

Read More
What is the best way to add a value to an array in state

I have an array in state, let's say this.state.arr. I want to add something to this state property, and then change some more properties. Option 1 onChange(event){ this.state.arr.push('newvalue'); ... this.setState({some:'val',arr:this.…

Read More
setInterval in a React app

I'm still fairly new at React, but I've been grinding along slowly and I've encountered something I'm stuck on. I am trying to build a "timer" component in React, and to be honest I don't know if I'm doing this …

Read More