title: React: Mixing javascript with jsx
body: <p>I have a simple method which returns jsx that looks as follows:</p>
  
  <pre><code>renderNewsItems = newsItems =&gt; {
      return(
          newsItems.map(newsItem =&gt; 
          &lt;NewsItem title={newsItem.title} imageUrl={newsItem.imageUrl} /&gt;)
      );
    }
  </code></pre>
  
  <p>and this works fine however when I try to add markup to layout the individual <code>&lt;NewsItem /&gt;</code> components, I'm struggling to figure out how to get it to work. My current, broken attempt looks as follows:</p>
  
  <pre><code>renderNewsItems = newsItems =&gt; {
      return(
          &lt;div className="row"&gt;
              newsItems.map(newsItem =&gt; 
              &lt;div className="col-4"&gt;
                  &lt;NewsItem title={newsItem.title} imageUrl={newsItem.imageUrl} /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>which results in the error:</p>
  
  <blockquote>
    <p>'newsItem' is not defined  no-undef</p>
  </blockquote>
  
  <p>In case it's not clear, I'm trying to use the bootstrap grid system to set the layout for how my individual <code>&lt;NewsItem/&gt;</code> components should be rendered</p>