setState nested object using es6 spread

Question

I have default state like this:

this.state = {
  location:{
    lat: 1234,
    lng: 3245
  }
}

so every time I want to update either lat or lng I have to do this

this.setState({ location: {...this.state.location, lat: newLate} })

or

this.setState({ location: {...this.state.location, lng: newLng } })

if I have several setState in my component I have to write a lot of ..., worse if I have one level of nested object to work with. Also it's dangerous to do this {this.state.location.lat} because it will have error and it make the whole app to crash if location is not defined. What's the tip when you work on multiple nested array of object or object in react?

the tip is that ... makes the code more compact already, how short do you want the code to be? — Jaromanda X
– Jaromanda X, Commented Jan 24, 2018 at 5:20
@JaromandaX I think there are some library like normlizr to solve this problem. — Xie Xie Fang
– Xie Xie Fang, Commented Jan 24, 2018 at 5:24

klugjo · Accepted Answer · 2018-01-24 09:26:53Z

6

Whenever possible, keep your state as 'flat' as possible.

In your case, you can simply do:

this.state = {
  lat: 1234,
  lng: 3245
}

As your state becomes bigger, use naming to segregate the different properties

this.state = {
  locationLat: 1234,
  locationLng: 3245
}

Even in applications with hundreds of components, I never need to use nested states.

Additional remarks:

Split your component into smaller pieces whenever you see this pattern
Only use a nested object if you know the entire object will be updated each time

From your location object:

const location = {
    lat: 1234,
    lng: 3245
}

initialize your state like so:

this.state = location

edited Jan 24, 2018 at 9:26

answered Jan 24, 2018 at 5:20

klugjo

21k10 gold badges65 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Xie Xie Fang Over a year ago

sometime you can't do whatever you want, I'm a frontend who doesn't have control over the structure of the response data, done by another team.

klugjo Over a year ago

but you are free to transform the response into whatever object you want to use in your component.

klugjo Over a year ago

edited my post. If thats not what you asked for, please update you question with more details on what your API response actually is or post a new question so as not to be too confusing. Thanks

cauchy · Accepted Answer · 2018-01-24 05:47:25Z

1

It is always recommended to keep the state flat as possible. So In your case it can be

state={
  locationLat:123,
  locationLng: 456,
}

The main reason of it comes from How object.assign works. It copy the value for only first level.

See the native implementation of Object.assign to understand more. Since it copy only for first level it is recommended to keep state flat.

var a = {b:1, c:{d:1}}

var e = Object.assign({},a)

console.log(a===e) // It will false

e.c.d = 2

console.log(a.c.d) //It will be 2

Ref to Read more:

State Normalising by Dan

answered Jan 24, 2018 at 5:47

cauchy

1,1431 gold badge10 silver badges22 bronze badges

Collectives™ on Stack Overflow

setState nested object using es6 spread

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related