Page update when clicking a button (reactjs)

Question

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?

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({   
    randomText(color) { 
        var style = {
            color: colors[color],
        }
        return ( <h1 style={style}>  Random text  </h1> ); 
    }, 
    randomNumberOfRandomText() { 
        var color = Math.floor((Math.random() * 5));
        var rows = []; 
        var num = Math.floor((Math.random() * 5) + 1);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        return <div> {rows} </div>; 
    }, 
    handleSubmit() { 

    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
            </section>
        {this.randomNumberOfRandomText()} 
        </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

https://jsfiddle.net/danyaljj/rvLow09s/

Note that we don't want to see the previous elements in the page.

Answer 1

In most circumstances, Jean's answer is the best proper way to update your component's data. With that said, the code below accomplishes what you want as well.

JSFiddle Demo

The reason I'm including it is because the forceUpdate() can be useful in cases like yours where the data that is updating in your component is the result of a psuedorandom generator. Since your priority is simulating random behavior over updating component state or prop data, forceUpdate() can be a cleaner way to make this particular update re-render itself.

From React's Component API Documentation :

If your render() method reads from something other than this.props or this.state, you'll need to tell React when it needs to re-run render() by calling forceUpdate().

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({   
    randomText(color) { 
        var style = {
            color: colors[color],
        }
        return ( <h1 style={style}>  Random text  </h1> ); 
    }, 
    randomNumberOfRandomText() { 
        var color = Math.floor((Math.random() * 5));
        var rows = []; 
        var num = Math.floor((Math.random() * 5) + 1);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        return <div> {rows} </div>; 
    }, 
    handleSubmit(e) { 
      e.preventDefault();
      this.forceUpdate();
    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
            </section>
        {this.randomNumberOfRandomText()} 
        </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

Answer 2

In fact, why not use setState and getInitialState .

var colors = ['red', 'yellow', 'blue', 'green']; 
var Hello = React.createClass({

    getInitialState() {
        return {
            text: []
        }
    },

    randomText(color) { 
        var style = {
            color: colors[color],
        }
        return ( <h1 style={style}>  Random text  </h1> ); 
    }, 
    randomNumberOfRandomText() { 
        var color = Math.floor((Math.random() * 5));
        var rows = []; 
        var num = Math.floor((Math.random() * 5) + 1);
        for (var i=0; i < num; i++) {
            rows.push(this.randomText(color));
        }
        this.setState({text: rows});
    }, 
    handleSubmit() { 
        this.randomNumberOfRandomText();
    }, 
    render: function() {
        return  ( <div>  
            <section>
            <button onClick={this.handleSubmit.bind(this)}>Generate new random texts! </button>
        </section>
        <div>{this.state.text}</div> 
       </div>);
    }
});

React.render(<Hello name="World" />, document.getElementById('container'));

I update jsfiddle .

When you click on handleSubmit() , you execute randomNumberOfRandomText() whish update the state of element.

setState() will always trigger a re-render