title: If condition inside of map() React
body: <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>