Mobx-state-tree: Cannot get values from type.map

[mreed]

This probably is a user issue. I am new to mobx and mobx-state-tree but I cannot figure out how to iterate or map the objects in a types.map
I have:
export const Phrase = types.model({
id : types.identifier(),
name : types.string

})
export const Store = types.model({
phrases : types.map(Phrase)

within my component i have:

@inject("store")
@observer
export default class PhraseContainer extends React.Component {
addPhrase(e){
this.props.store.addPhrase(e.target.value)
}
render(){
let {phrases } = this.props.store

   // Object.values(phrases).map(k => console.log(k.id))

    return (
    <div>
        <h1>Student Phrases</h1>
        <p> PhraseCount = {this.props.store.phraseCount()} </p>
        <select onChange = {this.addPhrase.bind(this)}>
            <option key="phrase1" value="Course">Course</option>
            <option key="phrase2" value="Ethnicity">Ethnicity</option>
        </select>
        <ul>
            {
               // this.props.store.phrases &&
                this.props.store.phrases.values().map(phrase => (
                    <li>{phrase.name}</li>
               ))
            }
        </ul>
    </div>
)}

}
this.props.store.phrases.values().map(phrase => (

{phrase.name}

i get: this.props.store.phrases.values(...).map is not a function
there is an example on egghead.io lesson 6 that uses this exact syntax : group.user.values().map

[mattruby]

Please create a codesandbox.io example.

On Sun, Jun 3, 2018, 12:07 PM mreed [e-mail] wrote:

This probably is a user issue. I am new to mobx and mobx-state-tree but I
cannot figure out how to iterate or map the objects in a types.map
I have:
export const Phrase = types.model({
id : types.identifier(),
name : types.string

})
export const Store = types.model({
phrases : types.map(Phrase)

within my component i have:

@Inject https://github.com/Inject("store")
@Observer https://github.com/Observer
export default class PhraseContainer extends React.Component {
addPhrase(e){
this.props.store.addPhrase(e.target.value)
}
render(){
let {phrases } = this.props.store

// Object.values(phrases).map(k => console.log(k.id))

return (
<div>
    <h1>Student Phrases</h1>
    <p> PhraseCount = {this.props.store.phraseCount()} </p>
    <select onChange = {this.addPhrase.bind(this)}>
        <option key="phrase1" value="Course">Course</option>
        <option key="phrase2" value="Ethnicity">Ethnicity</option>
    </select>
    <ul>
        {
           // this.props.store.phrases &&
            this.props.store.phrases.values().map(phrase => (
                <li>{phrase.name}</li>
           ))
        }
    </ul>
</div>

)}

}
this.props.store.phrases.values().map(phrase => (

• {phrase.name}

i get: this.props.store.phrases.values(...).map is not a function
there is an example on egghead.io lesson 6 that uses this exact syntax :
group.user.values().map

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mobxjs/mobx-state-tree/issues/844, or mute the thread
https://github.com/notifications/unsubscribe-auth/AAIrcrOI0n5xdQVH2x-Y2Hx_Jp5rR_8wks5t5BfsgaJpZM4UYKFw
.

[luisherranz]

i get: this.props.store.phrases.values(...).map is not a function

This changed in Mobx 2. Now .values() returns an iterator. You should use Array.from(this.props.store.phrases.values()).map or import values from mobx (not mobx-state-tree) and use values(this.props.store.phrases).map.

[mreed]

This changed in Mobx 2. Now .values() returns an iterator. You should use Array.from(this.props.store.phrases.values()).map or import values from mobx (not mobx-state-tree) and use values(this.props.store.phrases).map.

Thank you. This fixed my issue. Both ways you suggested worked.