title: Page update when clicking a button (reactjs)
body: <p>Suppose I want to render page again, after clicking a button. How can I accomplish it? In particular how would you change my program to generate random texts, when clicking the button?  </p>
  
  <pre><code>var colors = ['red', 'yellow', 'blue', 'green']; 
  var Hello = React.createClass({   
      randomText(color) { 
          var style = {
              color: colors[color],
          }
          return ( &lt;h1 style={style}&gt;  Random text  &lt;/h1&gt; ); 
      }, 
      randomNumberOfRandomText() { 
          var color = Math.floor((Math.random() * 5));
          var rows = []; 
          var num = Math.floor((Math.random() * 5) + 1);
          for (var i=0; i &lt; num; i++) {
              rows.push(this.randomText(color));
          }
          return &lt;div&gt; {rows} &lt;/div&gt;; 
      }, 
      handleSubmit() { 
  
      }, 
      render: function() {
          return  ( &lt;div&gt;  
              &lt;section&gt;
              &lt;button onClick={this.handleSubmit.bind(this)}&gt;Generate new random texts! &lt;/button&gt;
              &lt;/section&gt;
          {this.randomNumberOfRandomText()} 
          &lt;/div&gt;);
      }
  });
  
  React.render(&lt;Hello name="World" /&gt;, document.getElementById('container'));
  </code></pre>
  
  <p><a href="https://jsfiddle.net/danyaljj/rvLow09s/" rel="nofollow">https://jsfiddle.net/danyaljj/rvLow09s/</a></p>
  
  <p>Note that we don't want to see the previous elements in the page. </p>