title: How do you reload an iframe with ReactJS?
body: <p>My ReactJS component contains an iframe. In response to an event in the outer page, I need to reload the iframe. If the user has navigated to another page in the iframe, I need to reset it to the URL that it had when I first loaded the page. This URL is available in <code>this.props</code>.</p>
  
  <p>I've tried using <code>forceUpdate()</code>. I can see that this causes the <code>render</code> method to run, but the iframe doesn't get reset - presumably because React can't tell that anything has changed.</p>
  
  <p>At the moment I'm appending some random text to the iframe's querystring: this URL change forces React to re-render the iframe. However this feels a bit dirty: the page within the iframe is beyond my control so who knows what this extra querystring value might do?</p>
  
  <pre><code>resetIframe() {
      console.log("==== resetIframe ====");
      this.forceUpdate();
  }
  
  public render() {
      console.log("==== render ====");
  
      // How can I use just this.props.myUrl, without the Math.random()?
      let iframeUrl = this.props.myUrl + '&amp;random=' + Math.random().toString();
  
      return &lt;div&gt;
          &lt;button onClick={() =&gt; { this.resetIframe(); }}&gt;Reset&lt;/button&gt;
          &lt;iframe src={iframeUrl}&gt;&lt;/iframe&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>(I'm using TypeScript too, if that makes a difference.)</p>