title: react - conditional rendering inside component return function
body: <p>I would like to understand why react behaves this way.</p>
  
  <p>This works</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>class Feed extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const posts = [{ id: 1, title: 'post-1' }, { id: 2, title: 'post-2' }];
      return (
        &lt;&gt;
          {posts.map(post =&gt; (
            &lt;Post key={post.id} title={post.title} /&gt;
          ))}
        &lt;/&gt;
  </code></pre>
  
  <p>But this doesn't</p>
  
  <pre class="lang-js prettyprint-override"><code>class Feed extends React.Component {
    constructor(props) {
      super(props);
    }
  
    render() {
      const posts = [{ id: 1, title: 'post-1' }, { id: 2, title: 'post-2' }];
      return (
        &lt;&gt;
          {posts.map(post =&gt; {
            // changes are here
            if (post.id &lt; 2) {
              &lt;Post key={post.id} title={post.title} /&gt;;
            }
          })}
        &lt;/&gt;
  </code></pre>
  
  <p>It just returns blank. No errors.</p>
  
  <p>What is the reason react isn't rendering this? And what would be the best approach to only render <code>post-1</code>?</p>