How to use the react-dom.createPortal function in react-dom

render()
	{
		// Shows tooltip on mouse over when on desktop.
		// Shows tooltip on touch when on mobile.

		// `ReactDOM.createPortal()` requires React >= 16.
		// If it's not available then it won't show the tooltip.

		const content = this.renderContent()

		const tooltip = this.tooltip && content && ReactDOM.createPortal &&
			ReactDOM.createPortal(content, this.tooltip)

		// For React >= 16.2.
		// Disable React portal event bubbling.
		// https://github.com/facebook/react/issues/11387#issuecomment-340019419
		if (React.Fragment) {
			return (
				
					{this._render()}
					{tooltip}
				
			)
		} else {
			// Legacy version support.
			// Can be a bit buggy in some rare cases of mouseentering and mouseleaving.
			// Will be removed in some future major version release.
			return this._render(tooltip)

this.props.className,
			this.state.portalClasses,
		);
		const fipDropDownNode = (
			<div>
				{this.props.children}
			</div>
		);
		// should we render to a portal or
		// just usual?
		if (this.state.appendRoot === 'self') {
			// render to the App itself
			return fipDropDownNode;
		}
		// render to the DOM
		return createPortal(fipDropDownNode, this.state.appendRoot);
	}
}

const PlayIconInject = ({ renderNode }) =>
	ReactDOM.createPortal(
		,
		renderNode
	);

render() {
    const { type } = this.state;
    const { active, closeAuthModal } = this.props;
    if (!active) return <span>;
    return ReactDOM.createPortal(
      <div> this.handleModalBackgroundClick(event)}&gt;
        <div>
          <div>
            <h3>{getModalTitle(type)}</h3>
          </div>
          {this.getAuthForm(type)}
           closeAuthModal(event)}&gt;Close
        </div>
      </div>,
      appRoot
    );
  }
}</span>

const properContainerFunc = (props: { children: React.ReactNode[] }) => {
        return ReactDOM.createPortal(props.children, document.body);
    };

render() {
    if (this.leafletElement._contentNode) {
      return createPortal(this.props.children, this.leafletElement._contentNode)
    }
    return null
  }
}

render () {
    const { children = null } = this.props

    const base = (
      isValidElement(children)
        ? cloneElement(children, { ref: this.set$base })
        : <span>{ children }</span>
    )

    const guide = createPortal(this.renderGuide(), this.portal)

    return (
      
        { base }
        { guide }
      
    )
  }

)}
						{this.props.children}
					
				
			
		);

		if (closeOnClickAway) {
			child = {child};
		}

		const target = typeof window !== 'undefined' ? window : 'window';

		return (
			
				{ReactDOM.createPortal(child, this.rootElement)}
			
		);
	}

<div>{this.props.children}</div>
        
      
    );

    if (initialRender) {
      doc.open('text/html', 'replace');
      doc.write(this.props.initialContent);
      doc.close();
      this._setInitialContent = true;
    }

    const mountTarget = this.getMountTarget();

    return [
      ReactDOM.createPortal(this.props.head, this.getDoc().head),
      ReactDOM.createPortal(contents, mountTarget)
    ];
  }

className="kirk-snackbar-cross"
                onClick={this.props.close}
              >
                
              
            
          
        )}
      
    )

    if (!this.portalNode) {
      return modalElement
    }

    return createPortal(modalElement, this.portalNode)
  }
}