React JS - How to add object inside object

Question

I have this code in constructor :

constructor() {
    this.state = {
        recipient: {
          lat: -6.173752,
          lon: 106.8925773
        }
    }
}

And I want to add this to recipient :

var temp = {
  address: 'example street',
  phone: '+623123131321'
}

How to add temp variable to recipient ?

Striped · Accepted Answer · 2020-12-22 00:52:29Z

8

You can override your state using the spread operator

this.state = {
    recipient: {
        ...temp,
        lat: -6.173752,
        lon: 106.8925773
    }
}

Or outside the constructor using setState

this.setState(prevState => ({
   recipient: {...prevState.recipient, ...temp}
}))

answered Feb 6, 2018 at 16:05

Striped

2,5423 gold badges27 silver badges33 bronze badges

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

Comments

Shubham Khatri · Accepted Answer · 2018-02-06 16:06:25Z

4

You can make use of spread operator to merge the state values

this.setState(prevState => ({
    recipient: {...prevState.recipient, ...temp}
}))

answered Feb 6, 2018 at 16:06

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Dennis Nedry · Accepted Answer · 2018-09-27 15:20:51Z

0

An even simpler solution is to directly destructure recipients current state into the new state like this.

this.setState({
    recipient: {...this.state.recipient, ...temp}
})

answered Sep 27, 2018 at 15:20

Dennis Nedry

4,8774 gold badges46 silver badges59 bronze badges