Iterating and return elements using for loop in JSX : <p>I was trying to access my component by using loop to iterate and call my component. I encountered no syntax error, however I didn't get desired elements out of my loop. Here is a sample code which I tried.</p>

<pre><code>    render() {
    return (
      &lt;div&gt;
            {this.genThumbnail([{'src':'../../resources/images/p1.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p2.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p3.jpg', 'mode':'normal'},
            {'src':'../../resources/images/p4.jpg', 'mode':'landscape'},
            {'src':'../../resources/images/p5.jpg', 'mode':'portrait'},
            {'src':'../../resources/images/p6.jpg', 'mode':'landscape'}])}

          &lt;/div&gt;
        &lt;/div&gt;
)
}

genThumbnail(nails) {
    debugger;
    let src, mode;
    return(
      &lt;div&gt;
        {
          nails.forEach(function (data,index){
              return &lt;ThumbNail imgsrc={data.src} mode={data.mode}/&gt;
          }
        )
        }
      &lt;/div&gt;

    )

  }
</code></pre>

<p>I had to use map() helper method to achieve this. Anyone please clarify the shortcoming as a result of forEach.</p>
