How to use forceUpdate() correctly? [duplicate]

Question

I'm trying to periodically reload an iframe but i'm using React so i can't manipulate the DOM directly. It seems like my best option is to use forceUpdate() because the url isn't changing so i can't use a state change to update it (See previous post here What's the best way to periodically reload an iframe with React?). However when i try doing a forceUpdate() it doesn't re-render my component. Any ideas as to why?

var Graph = React.createClass({
componentDidMount: function() {
    setInterval(function(){
        this.forceUpdate();
    }.bind(this), 5000);
},
render() {
    return (
        <iframe src="http://play.grafana.org/dashboard/db/elasticsearch-metrics" width="1900px" height="700px"/>
    )
}

});

See the codepen here: http://codepen.io/anon/pen/ggPGPQ

**I know grafana can be set to auto update, i'm just using this as an example iframe.

Answer 1

class App extends React.Component {
    state = {
        name: 'request',
        phones: ['nokia', 'sonya', 'ericsson']
    }

     Rerender = () => {
        this.forceUpdate()
     }

    render() {
        const rd= Math.random();
        return ( <div> REACT APP
            { this.state.phones.map(item => <p>{item} {rd}</p>) }

            <input type="button" value="Click" onClick={this.Rerender}/>
        </div>)
    }
}
ReactDom.render(
        <App />,
    document.getElementById('root')
);