How to map over an ImmutableJS List of Maps in JSX?
<p>I've got an ImmutableJS structure in a Redux store looking like this:</p>

<pre><code>Immutable.fromJS([{
  foo: 'bar'
}, {
  foo: 'baz'
}]);
</code></pre>

<p>It's being mapped to this.props.items in my React component. In my React render function I'm trying to do this:</p>

<pre><code>this.props.items.map(item =&gt; {
  return (
    &lt;div&gt;{item.foo}&lt;/div&gt;
  );
});
</code></pre>

<p>Nothing is being rendered. However if I <code>.toJS()</code> the list as below then it works:</p>

<pre><code>this.props.items.toJS().map(item =&gt; {
  return (
    &lt;div&gt;{item.foo}&lt;/div&gt;
  );
});
</code></pre>

<p>My question is: is .toJS() the correct way to do this? If not, what am I doing wrong?</p>