Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I have a component which gets passed as a prop the value of "form.$('userProfile').fields" which is an observable map like shown in the console.log screenshot:

class Location extends React.Component<*> {
    render() {
        console.log(this.props.fields);
        this.props.fields.map(function(i, el){
            console.log(i, el)
        return (<h1>location fields</h1>);
                mobx has a toJS function which will allow you to convert the observable back into a regular js array. You could do  import { toJS } from "mobx" and toJS( this.props.fields ) ...
– KpTheConstructor
                Jul 19, 2018 at 14:01
You can use values or entries on the observable Map to get an iterator of all values or entries, and spread it in a new array and map over that:
class Location extends React.Component<*> {
  render() {
    return (
        <h1>location fields</h1>
        {[...this.props.fields.entries()].map(function(entry) {
          return (
            <div key={entry[0]}>
              {entry[0]}: {entry[1]}
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.