title: React Iterate and insert components based on count of array
body: <p>So say i have an array</p>
  
  <pre><code>var arr=["one", "two", "three", "four"];
  </code></pre>
  
  <p>and i have a component 
  CardContainer</p>
  
  <pre><code>class CardContainer extends React.Component {   
      render() { 
          return (
              &lt;div&gt; 
              &lt;Card/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>what im trying to do is
  create a number of Card components based on length/count of array "arr",
  and also 
  set the text of the div in the Card component from the array.</p>
  
  <pre><code>class Card extends React.Component {   
      render() {
          return (
              &lt;div&gt; 
             &lt;!--Print arr[i] val using this.props? --&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>So my output will be 4 cards with, 
  array values printed on each card individually.</p>
  
  <p>This is what ive come up with unsucessfully</p>
  
  <pre><code>class CardContainer extends React.Component {   
      render() {
          var arr=["one", "two", "three", "four"];
          var elements=[];
          for(var i=0;i&lt;arr.length;i++){
              elements.push(&lt;Card value=arr[i]/&gt;);
          }
          return (
              &lt;div&gt; 
              {elements}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>