title: Rendering React Components from Array of Objects
body: <p>I have some data called stations which is an array containing objects.</p>
  
  <pre><code>stations : [
    {call:'station one',frequency:'000'},
    {call:'station two',frequency:'001'}
  ]
  </code></pre>
  
  <p>I'd like to render a ui component for each array position. So far I can write</p>
  
  <pre><code> var stationsArr = []
   for (var i = 0; i &lt; this.data.stations.length; i++) {
       stationsArr.push(
           &lt;div className="station"&gt;
               {this.data}
           &lt;/div&gt;
       )
   }
  </code></pre>
  
  <p>And then render</p>
  
  <pre><code>render(){
   return (
     {stationsArr}
   )
  }
  </code></pre>
  
  <p>The problem is I'm getting all of the data printing out. I instead want to just show a key like <code>{this.data.call}</code> but that prints nothing.</p>
  
  <p>How can I loop through this data and return a new UI element for each position of the array?</p>