title: Why can't I map() over this array in JSX?
body: <p>I must be doing something wrong.  I'm working on a codepen that makes a call to a REST endpoint for beer information, then I loop over it and display some of the info.  Nothing fancy and it's not complete yet in terms of nice looking CSS etc. but the looping over my array of beers doesn't work:</p>
  
  <p><a href="https://codepen.io/larryq/pen/yKyMOz" rel="nofollow noreferrer">https://codepen.io/larryq/pen/yKyMOz</a></p>
  
  <p>The key section is this bit below.  I get my data back from the endpoint and add it to a 'beersList' array that's in my state.  Then in the JSX I loop over it:</p>
  
  <pre><code>       this.state.beerList.map(beer =&gt; {
            &lt;div&gt;
              &lt;div className="beer-img"&gt;
                &lt;img src={beer.img} height="350" /&gt;
              &lt;/div&gt;
              &lt;div className="beer-info"&gt;
                &lt;h2&gt;{beer.name}&lt;/h2&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          })
  </code></pre>
  
  <p>..the trouble is, nothing appears on the screen, none of the <code>&lt;div&gt;</code>s are generated.</p>
  
  <p>I know for a fact when debugging that <code>beerList</code> is populated with the data I'm after, and in the console I can map over it and print out the information.  But on the screen here nothing happens and I can't figure out why?</p>