Why does my React Portal shows a Blank Page?-CodePudding

this is my index.html

  <div id="root"></div>
  <div id="portaltest"></div>

this my App.js

  import React, { Component } from "react";
import PortalTest from "./PortalTest";

export class App extends Component {
  render() {
    return (
      <div>
        <PortalTest />
      </div>
    );
  }
}

export default App;

this is what's in PortalTest.js

import React from "react";
import { ReactDOM } from "react";

function PortalTest() {
  return ReactDOM.createPortal(
    <div>This is the PORTAL DIV</div>,
    document.getElementById("portaltest")
  );
}

export default PortalTest;

This suppose to show the contents of PortalTest.js instead it only returns a blank page. What did I do wrong?

CodePudding user response：

Use import ReactDOM from 'react-dom' instead of import { ReactDOM } from 'react' and it should work.

See this sandbox.