title: Rendering an iFrame within a React Portal
body: <p>I was creating a <code>Logger</code> service which would track events within my application. To make the <code>Logger</code> service generic, I used React's Portal to capture the events fired in my application. The basic idea of my application is:</p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;LoggerPortal&gt;
     &lt;App&gt;
  &lt;/LoggerPortal&gt;
  </code></pre>
  
  <p>This worked well for my use case until the point that I used an <code>iFrame</code> within my application. </p>
  
  <p>Consider a very simple component that renders an iFrame:</p>
  
  <pre class="lang-js prettyprint-override"><code>const Frame = props =&gt; {
    const refiFrame = useRef(null);
  
    useEffect(() =&gt; {
      console.log(refiFrame.current.contentDocument);
    }, []);
  
    return (
      &lt;&gt;
        &lt;iframe id="i-framed-you" title="original-iframe-title" ref={refiFrame} /&gt;
      &lt;/&gt;
    );
  };
  </code></pre>
  
  <p>Now, when I render this <code>Frame</code> component above without the Portal wrapped around it, the <code>iframe.contentDocument</code> logs as expected.</p>
  
  <pre class="lang-js prettyprint-override"><code>ReactDOM.render(&lt;Frame /&gt;,rootElement)
  </code></pre>
  
  <p>But when I render the <code>Frame</code> component wrapped within a Portal the value of <code>iFrame.contentDocument</code> is <strong>null</strong>.</p>
  
  <pre class="lang-js prettyprint-override"><code>ReactDOM.render(
    &lt;LoggerPortal&gt;
      &lt;Frame /&gt;
    &lt;/LoggerPortal&gt;,
    rootElement
  );
  </code></pre>
  
  <p>Here is a <a href="https://codesandbox.io/s/portal-iframe-3s6w4" rel="nofollow noreferrer">codesandbox</a> that has an app that depicts my problem. Has anyone seen this issue when using portals and iFrame? Am I missing something obvious here?</p>