All thoughts and posts are my own, said by @rakibtg.
posted at Wednesday, 10 May 2017

It is a pain updating any object which is located in a React JS state.
Now, we have solutions for that too, like using a mutator, or who knows maybe you might be thinking about Object.assign() or maybe the Spread syntax , i know this terms sounds great but I just can't make them to work at first try ever. 

And I have a bad( but working ) solution for that, lets code. 🍻

Let say, our state looks like this:

  constructor( props ) {
    super ( props )
    this.state = {
      coffee  : true,
      user    : {}
    }
    this.handleChange = this.handleChange.bind( this )
  }

And while mounting the component we would call an api and populate the user state object with mouthful of informations that includes nested object and etc etc...

This is how our component will mount would look like:

  componentWillMount() {
    // Get user data
    restRequest( 'GET', 'http://example.com/user/rakibtg', {} ).then( ( userRes ) => {
      this.setState( { user : userRes } )
    } )
  }

Now, think of a use case where we need to update some information of the user state object. Let say we would update the information if the user is looking for a new job.

That is located at: 
this.state.user.jobs.status.searching

Now, if you directly update that in the state then your user state will be gone.
I would do this instead,

    const mt_updatableUser  = this.state.user
    let updatableUser       = mt_updatableUser
    updatableUser.jobs.status.searching = true
    this.setState( {
      user: updatableUser
    } )


Now, your user is happy so am I.