If condition inside of map() React : <p>I have a <code>map()</code>function that needs to display views based on a condition. I've looked at the React documentation on how to write conditions and this is how you can write a condition:</p>

<pre><code>{if (loggedIn) ? (
  // Hello!
) : (
  // ByeBye!
)}
</code></pre>

<p>Here's the link: <a href="https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator" rel="noreferrer">https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator</a> </p>

<p>So, I tried to take that knowledge and implemant it in my React app. And it turned out like this:</p>

<pre><code>render() {
  return (
    &lt;div&gt;
      &lt;div className="box"&gt;
        {this.props.collection.ids
          .filter(
            id =&gt;
              // note: this is only passed when in top level of document
              this.props.collection.documents[id][
                this.props.schema.foreignKey
              ] === this.props.parentDocumentId
          )
          .map(id =&gt;
            {if (this.props.schema.collectionName.length &lt; 0 ? (

              &lt;Expandable&gt;
                &lt;ObjectDisplay
                  key={id}
                  parentDocumentId={id}
                  schema={schema[this.props.schema.collectionName]}
                  value={this.props.collection.documents[id]}
                /&gt;
              &lt;/Expandable&gt;

            ) : (
              &lt;h1&gt;hejsan&lt;/h1&gt;
            )}
          )}
      &lt;/div&gt;
    &lt;/div&gt;
  )
}
</code></pre>

<p>But it doesn't work..! Here's the error:</p>

<p><a href="https://i.stack.imgur.com/4Ywnd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4Ywnd.png" alt="Screenshot"></a></p>

<p>I appreciate all the help I can get!</p>
