Using setState in reactJs with an object always remains empty

Question

I have this snippet that doesn't seem to be work and it is driving me insane! Can someone please point out what I have done wrong ?

getInitialState: function () {
    return {
        modalUser: {},
        users: []
    };
},
updateModalUser: function (user) {
    console.log(user);
    module.React.addons.update(this.state, {
        modalUser: { $set: user }
    });
    console.log(this.state);
},

I did try doing this originally without the addons, but I had the same result. i.e. my updateModalUser looked like:

updateModalUser: function (user) {
    console.log(user);
    this.setState({
        modalUser: user
    });
    console.log(this.state);
},

This output I get either way is:

Object {id: 28, fname:"fred", lname:"flinstone"…}

Object {modalUser: {}, users: []}

David Hellsing · Accepted Answer · 2015-05-13 11:44:59Z

3

this.setState() is async, you need to log the state in it’s callback:

updateModalUser: function (user) {
    console.log(user);
    this.setState({
        modalUser: user
    }, function() {
        console.log(this.state);
    })
}

More info here: https://facebook.github.io/react/docs/component-api.html#setstate

edited May 13, 2015 at 11:44

answered May 13, 2015 at 10:37

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

1 Comment

swifty Over a year ago

Thank you! that worked!... I tried wrapping console.log(this.state) within a setTimeout 2000, but that can't have been long enough!

Eric · Accepted Answer · 2015-05-13 10:34:36Z

-1

You should use this.setState({modalUser: newObjectHere}), which is the correct way of altering a component's state.

answered May 13, 2015 at 10:34

Eric

19k2 gold badges36 silver badges40 bronze badges

1 Comment

swifty Over a year ago

That is what I did. I have edited the example above to try and point this out.

Collectives™ on Stack Overflow

Using setState in reactJs with an object always remains empty

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related