0

I have the following list that I'm trying to return a new List from, but I keep getting the error shown below. Any thoughts?

export const questions = List([
  {uuid: uuid(), order: 0, text: 'Which country do you live in?', choices: [
    { choice: 'United States', added: true },
    { choice: 'Canada', added: true },
    { choice: 'Australia', added: true }
  ]},
  {uuid: uuid(), order: 1, text: 'Which country were you born in?', choices: [
    { choice: 'Mexico', added: true },
    { choice: 'California', added: true },
    { choice: 'Seoul', added: true }
  ]}
]);


questions.setIn([0, 'text'], 'changed')

Results in this error:

immutable.js:870 Uncaught Error: invalid keyPath
    at invariant (immutable.js:870)
    at updateInDeepMap (immutable.js:1974)
    at updateInDeepMap (immutable.js:1980)
    at List.Map.updateIn (immutable.js:1278)
    at List.Map.setIn (immutable.js:1256)
    at eval (eval at ./src/reducers/questionsList.js (questionsList.js:17), <anonymous>:1:11)
seasick
  • 1,094
  • 2
  • 15
  • 29
  • Possible duplicate of [Why does Immutable.js throw Invalid key path on Map.setIn()](https://stackoverflow.com/questions/37712871/why-does-immutable-js-throw-invalid-key-path-on-map-setin) – Simon Baumgardt-Wellander Nov 15 '17 at 17:31

2 Answers2

0

In Immutable 4.0.0-rc9, this should actually do what you want. In 3.x, setIn only worked with deeply immutable lists, but according to the most recent docs:

Plain JavaScript Object or Arrays may be nested within an Immutable.js Collection, and setIn() can update those values as well, treating them immutably by creating new copies of those values with the changes applied.

See this answer.

The issue is that questions is an Immutable List of vanilla JS objects. List#setIn() only works on deeply immutable objects. You probably want to set questions = Immutable.fromJS(...) to get a deeply immutable object.

If, however, it is intentional that you're putting vanilla JS objects inside of your immutable object (which I really hope it isn't), what you'd want to do is use Immutable to get the vanilla object, then use regular ol' assignment to change the values:

questions.get(0)['text'] = 'changed'
Simon Baumgardt-Wellander
  • 925
  • 5
  • 21
-3

Try to update immutable.js library

stesel
  • 37
  • 3