Create react immutable JS nested state

Question

I am trying to combine some of my flat state settings into a settings state object, and at the same time, I want to convert this object to a immutable JS state object.

I get errors though that my key is not defined, although I have set the initial state in the constructor.

Here is what I have so far:

constructor() {
    super();

    this.state = {
        "settings": Immutable.Map() 
    };      
}

Then in componentWillMount (since I get the data from an external API):

componentWillMount() {

    /* Some code */

    this.setState({
        settings: settings.setIn({airlines: Immutable.fromJS(airlines).toList()}),
    });
}

The error I get is: Uncaught ReferenceError: settings is not defined

Btw. the airlines element is an array of objects

Can someone help me out? Is my approach directionally right? And do I need to use updateIn afterwards (on update) once the airlines array is first set and I need to update, or is it safer to use setIn?

Community · Accepted Answer · 2017-05-23 12:32:38Z

1

As the error says, settings is not defined at this position.

Instead, refer to the settings slice of your state:

this.setState({
    settings: this.state.settings.setIn({airlines: Immutable.fromJS(airlines).toList()}),
});

Edit: You are also using ImmutableJS' setIn function incorrectly:

this.setState({
    settings: this.state.settings.setIn(['airlines'], Immutable.fromJS(airlines).toList()),
});

See the docs or this SO answer for more details.

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Jul 19, 2016 at 19:04

TimoStaudinger

42.7k16 gold badges91 silver badges96 bronze badges

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

4 Comments

user3611459 Over a year ago

great! oww, then I was close ;-) But I do get another error now: Expected iterable or array-like: [object Object]. My airlines variable is an array of 7 objects... any thoughts as well?

user3611459 Over a year ago

One more question though... I would like to add several elements to my settings object during one setstate call. The following gives me an empty "matchAirlines" object in my array.. Could you tell me if this is the right approach: settings: this.state.settings.setIn(["matchAirlines"], Immutable.fromJS(matchAirlines).toList()), settings: this.state.settings.setIn(["airlines"], Immutable.fromJS(airlines).toList()),

TimoStaudinger Over a year ago

You should really open a new question, since this goes beyond the scope of what should be discussed in a comment.

user3611459 Over a year ago

I created the question, which can be found here: stackoverflow.com/questions/38468310/…

Igorsvee · Accepted Answer · 2016-07-19 19:03:36Z

1

settings needs to be referenced like this.state.settings.setIn...

answered Jul 19, 2016 at 19:03

Igorsvee

4,2111 gold badge28 silver badges22 bronze badges

Collectives™ on Stack Overflow

Create react immutable JS nested state

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related