How to "update" state in reactJS?

Question

I have this

— Ajax Callback :

        success:function(data) {
            self.setState({
                user: {
                    id_user: data.session.id_user,
                    firstname_user: data.session.firstname_user,
                    lastname_user: data.session.lastname_user,
                    action: "updateUser"
                },
            });
        }

— And handleChange on my inputs :

handleChange(){
    this.setState({
        user: {
            firstname_user: this.firstname_user.refs.input.value,
            lastname_user: this.lastname_user.refs.input.value
        }
    });
}

Give this :

 console.log(this.state.user);

 /*
   user
      firstname_user: "Blablabla"
      lastname_user: "Blablabla"
 */

Instead this : console.log(this.state.user);

 /*
    user
      id_user: XX
      firstname_user: "Blablabla"
      lastname_user: "Blablabla"
      action: "updateUser"
 */

When handleChange is fired, this.state.user deletes id_user and action key. So this.state.user leaves only firstname_user and lastname_user. Why?

I didn't delete any keys so I don't understand why.

How to fix this please?

Thanks

@AndrewLi is right. setState sets the state of the object, not updates it. I think you can take a look at this duplicate as well. http://stackoverflow.com/a/25713365/763909 — newpatriks, Feb 25 '17 at 17:38

Bartek Fryzowicz · Answer 1 · 2017-02-25T18:01:47.590

setState(nextStateObject) performs shallow merge of nextStateObject into current state so nested objects (like state.user in your case) are not extended but overridden. You can use Object.assign to solve your problem:

handleChange(){
    let updatedUser = Object.assign({}, this.state.user, {
            firstname_user: this.firstname_user.refs.input.value,
            lastname_user: this.lastname_user.refs.input.value
        });
    this.setState({
        user: updatedUser
    });
}

Please check React docs of setState method.

How to "update" state in reactJS?

1 Answers1