title: Mobx observable map to js array
body: <p>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: </p>
  
  <pre><code>class Location extends React.Component&lt;*&gt; {
      render() {
          console.log(this.props.fields);
          this.props.fields.map(function(i, el){
              console.log(i, el)
          })
          return (&lt;h1&gt;location fields&lt;/h1&gt;);
      }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/RQNOQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RQNOQ.png" alt="enter image description here"></a></p>
  
  <p>Is it possible to do something like this:</p>
  
  <pre><code>this.props.fields.map(function(i, el){
      console.log(i, el)
      // render React components
  })
  </code></pre>
  
  <p>where you can render subcomponents based on the values you get back from inside the map method?</p>