What's the best way to periodically reload an iframe with React?

Question

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

Answer 1

Change key property for component for example:

this.state = {iframeKey: 0};

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

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

Answer 2

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.