Rendering components in the iframe doesn't work

[maddie-wang]

I tried to render components in the iframe resizer, but it did not work. Basically I'm trying to get "HELLO" to appear in the frame

import React, { Component } from "react";
import { createPortal } from "react-dom";
import IframeResizer from "iframe-resizer-react";
export class IFrame extends Component {
  constructor(props) {
    super(props);
    this.state = {
      mountNode: null,
    };
    this.setContentRef = (contentRef) => {
      this.setState({
        mountNode: contentRef?.contentWindow?.document?.body,
      });
    };
  }

  render() {
    const { children, ...props } = this.props;
    const { mountNode } = this.state;
    return (
      <IframeResizer
        {...props}
        ref={this.setContentRef}
        log
        style={{ width: "1px", minWidth: "100%" }}
      >
        {mountNode && createPortal(children, mountNode)}
      </IframeResizer>
    );
  }
}

In another component I rendered "HELLO" in that IFrame

      <IFrame>
        <ThemeProvider theme={theme}>
          <Provider store={store}>
            <PersistGate loading={null} persistor={persistor}>
              <AllApp />
              <p>HELLO</p>
              <style type="text/css">{styles}</style>
            </PersistGate>
          </Provider>
        </ThemeProvider>
      </IFrame>

Didn't work! I didn't see HELLO

`

[davidjbradshaw]

It expects the iframe to be in a different file and linked via src.