title: how to render through a simple for-loop in Reactjs?
body: <p>I have a simple react component defined below</p>
  
  <pre><code>React.createClass({
  
  generateContent:function(){
  
  for(i = 1;i&lt;=100;i++)
  
       if(i%2 == 0)
       {
          return &lt;li&gt;Even!&lt;/li&gt;
       } 
  
   else{
  
        return &lt;li&gt;Odd!&lt;/li&gt;
  
      }
  
  
  },
  
  
  render:function(){
  
     return  (&lt;ul&gt;
                {this.generateContent()}
              &lt;/ul&gt;)
  
  
  }
  
  
  })
  </code></pre>
  
  <p>While Rendering, The component returns the first statement of the for loop(<code>&lt;li&gt;Odd&lt;/li&gt;</code>) and then exits.</p>
  
  <p>I'd like something like</p>
  
  <pre><code>&lt;li&gt;Odd&lt;/li&gt;
  &lt;li&gt;Even&lt;/li&gt;
  &lt;li&gt;Odd&lt;/li&gt;
  &lt;li&gt;Even&lt;/li&gt;
  ....
  ...
  </code></pre>
  
  <p>How can i achieve this?</p>