I have the following code in ponent:

constructor() {
    this.state = Immutable.fromJS({
            user : {
                wasChanged : false,
                firstName : false,
                lastName : false,
                address : {
                    street : false,
                }
            }
        });
}
onEdit({target: {dataset: {target}}}, value) {
      this.setState(function (prevState) {
          return prevState.setIn(['user', target], value);
        });
  }
render() {
    var user = this.state.get('user').toJS();
    ...
}

The problem is that when I try to update the value in onEdit I see that prevState has different prototype set. I don't understand why or what am I doing wrong. I see this in console

> Object.getPrototypeOf(this.state)
src_Map__Map {@@__IMMUTABLE_MAP__@@: true}

> Object.getPrototypeOf(prevState)
Object {}

After the state has been changed it goes to render where it of course can't find get function or anything from Immutable

Using react with addons 0.13.3.

I have the following code in ponent:

constructor() {
    this.state = Immutable.fromJS({
            user : {
                wasChanged : false,
                firstName : false,
                lastName : false,
                address : {
                    street : false,
                }
            }
        });
}
onEdit({target: {dataset: {target}}}, value) {
      this.setState(function (prevState) {
          return prevState.setIn(['user', target], value);
        });
  }
render() {
    var user = this.state.get('user').toJS();
    ...
}

The problem is that when I try to update the value in onEdit I see that prevState has different prototype set. I don't understand why or what am I doing wrong. I see this in console

> Object.getPrototypeOf(this.state)
src_Map__Map {@@__IMMUTABLE_MAP__@@: true}

> Object.getPrototypeOf(prevState)
Object {}

After the state has been changed it goes to render where it of course can't find get function or anything from Immutable

Using react with addons 0.13.3.

• javascript
• reactjs
• immutable.js

Share Improve this question Follow edited Jul 18, 2015 at 3:09 Brigand 86.3k2020 gold badges167167 silver badges173173 bronze badges asked Jul 18, 2015 at 2:11 Andrey BoriskoAndrey Borisko 4,60922 gold badges2323 silver badges3131 bronze badges 2

• Is it because it should be a simple object with keys and not fancy Immutable? – Andrey Borisko Commented Jul 18, 2015 at 2:44
• Any specific reason that you want to use immutable? – Salman Commented Nov 8, 2015 at 8:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Put it as a key on state.

this.state = {
  data: Immutable...
};

Currently the reason you can't use an Immutable object as state is the same reason you can't do this.state = 7: it's not a plain JavaScript object.

Roughly the operation looks like this:

React.Component.prototype.setState = (changes) => {
  batchUpdate(() => {
    // copies own properties from state to the new object
    // and then own properties from changes to the new object
    var nextState = Object.assign({}, state, changes);

    this.ponentWillUpdate(...);
    this.state = nextState;
    queueDomUpdateStuff(this.render(), () => this.ponentDidUpdate());
  });
};

Components' state should be a plain JavaScript object; values of that object can be Immutable values. Supporting Immutable values as state is discussed in issue 3303.