How to correct React Portal error: Target container is not a DOM element

Question

im having an issue getting react portals working. I dont understand why I am receiving error message portal id is not DOM element that is clearly a valid DOM element.

I have a sandbox here

Code in its entirety presented here. The console.log reports correctly that the element is a DOM element but React is throwing an error.

import "./styles.css";
import { createPortal } from "react-dom";
import { useEffect, useState } from "react";

export default function App() {
  const [portalDiv, setPortalDiv] = useState(undefined);

  useEffect(() => {
    let pd = document.getElementById("portalDiv");
    console.log(pd);
    setPortalDiv(pd);
  }, []);

  return (
    <>
      <div id="portalDiv">portal container</div>
      <div className="app">
        {/* {console.log("render portaldiv", portalDiv)} */}
        {
          (portalDiv &&
            createPortal(
              <>
                <h1>Inside portal</h1>
              </>
            ),
          portalDiv)
        }
        <h1>Outside portal</h1>
      </div>
    </>
  );
}

Any advice appreciated. Thanks.

Answer 1

This usecase is not recommended as stated in my comment, but here is a reproducible example.

If you intend to inject a React Node into VDOM, you should use React API for that, so you won't get a race condition while querying the DOM via DOM API.

import "./styles.css";
import { createPortal } from "react-dom";
import { useRef } from "react";

export default function App() {
  const containerRef = useRef();

  return (
    <>
      <div ref={containerRef}>portal container</div>
      <div id="app">
        {containerRef.current &&
          createPortal(<h1>Example Element</h1>, containerRef.current)}
        <h1>Outside portal</h1>
      </div>
    </>
  );
}