I'm building a webpage using React which means I can't manipulate the DOM directly. I've tried reloading my iframe by updating the url state but that doesn't seem to reload the page. This is the state code I have tried.

ponentDidMount: function() {
    setInterval(function(){
        this.setState({currentUrl:currentUrl});
    }.bind(this), 1000);
},
 getInitialState: function() {
    return {defaultUrl:this.props.graph.url, currentUrl:this.props.graph.url};
},
render() {
    // render the graph iframe
    return (
        <iframe src={this.state.currentUrl} id={this.props.graph.url} style={this.props.style} width={this.props.width} height={this.props.graph_height} />
    )
}

I'm building a webpage using React which means I can't manipulate the DOM directly. I've tried reloading my iframe by updating the url state but that doesn't seem to reload the page. This is the state code I have tried.

ponentDidMount: function() {
    setInterval(function(){
        this.setState({currentUrl:currentUrl});
    }.bind(this), 1000);
},
 getInitialState: function() {
    return {defaultUrl:this.props.graph.url, currentUrl:this.props.graph.url};
},
render() {
    // render the graph iframe
    return (
        <iframe src={this.state.currentUrl} id={this.props.graph.url} style={this.props.style} width={this.props.width} height={this.props.graph_height} />
    )
}

• javascript
• reactjs
• iframe

Share Improve this question Follow asked Jan 10, 2017 at 19:26 KaitlynKaitlyn 8311 gold badge22 silver badges44 bronze badges 11

• Using forceUpdate would force a re-render(): facebook.github.io/react/docs/react-ponent.html#forceupdate – lux Commented Jan 10, 2017 at 19:35
• I've tried that but it wasn't doing anything the iframe still didn't reload – Kaitlyn Commented Jan 10, 2017 at 21:10
• Define "wasn't doing anything". A call to forceUpdateis guaranteed to invoke render in your ponent, which would necessarily repaint the iframe. Can you create a plunkr or codepen? – lux Commented Jan 10, 2017 at 21:13
• It wasn't forcing an update, maybe i'm using it wrong. I just replaced this.setState({currentUrl:currentUrl}); with this.forceUpdate() – Kaitlyn Commented Jan 10, 2017 at 21:21
• 1 That pen is working for me! If you put a console.log('Rendering'); in the top of the render() function (before the return), you'll see that it does in fact re-render. Perhaps the content within the iframe itself isn't changing? But that would be outside of React. – lux Commented Jan 11, 2017 at 1:27

 |  Show 6 more ments

2 Answers 2

Sorted by: Reset to default 5

Change key property for ponent for example:

this.state = {iframeKey: 0};

setInterval(() => this.setState(s => ({iframeKey: s.iframeKey + 1})), 1000);

<Iframe key={this.state.iframeKey} url={some url}/>

This is a use case for the ref property if, as I assume, the contents of the iframe isn't under react control. Apply one to the iframe, then use the setInterval to refresh the iframe url.

The reason the iframe isn't updating when you set the URL in state is that the url hasn't changed(?) and react doesn't redraw when that's the case.