Mobx-state-tree: map.values() in getting started

[vincentleeuwen]

Hey guys,

Quite a newbie so I might be doing something wrong. I wasn't able to get the getting started
tutorial working without spreading the map.values() being used:

[ ...store.todos.values() ].map(todo => <TodoView todo={todo} /> )

Not sure if I am missing something here?

Cheers,

Vincent

[luisherranz]

I think .values() returns now a generator. You can use either Array.from(store.todos.values()) or import values from the mobx package and use values(store.todos).

By the way, is this info wrong somewhere in the getting started tutorial? If so, could you please point us where so we can fix it?
EDIT: No problem, I found it 😄

[paul42]

quick fyi, I tried both of @luisherranz 's suggestions and they both work for me in code sandbox - I don't suppose there's any guidance on one being better than the other? or does it just come down to personal preference?

the first of the suggested methods:
Array.from(props.store.todos.values())
and that worked, minus an eslint error on Code Sandbox

when I tried the second method:
values(props.store.todos)
it worked as well without eslint error on Code Sandbox

get the same error from the next code item, Computed Properties and was able to fix it in my own code by using the
get pendingCount() { return values(self.todos).filter(todo => !todo.done).length },
is this an acceptable use of 'values' ? will it still be computed properly or should I try a different tack?

I can take a first swipe at a PR for updating information in the getting-started guide once the above PR is accepted if that'd be helpful?

[luisherranz]

is this an acceptable use of 'values' ? will it still be computed properly or should I try a different tack?

Absolutely!

values() is now the recommended approach. I changed the docs and the codesandbox. You can take a look at the PR here: https://github.com/mobxjs/mobx-state-tree/pull/784

Closing now. Feel free to reopen if needed!

[jvaclavik]

Just FYI, the same problem is also in this tutorial: https://egghead.io/lessons/react-more-mobx-state-tree-types-map-literal-union-and-enumeration

[kcharles52]

It can also be traced in the videos uploaded on youtube here