0

We are using react.
I want to create a Portal component and enclose a Drawer component in the Portal component.
I have created a Poratl component, but the following error occurs.
I don't know how to solve this problem.

errorMesssage

_react.default.createPortal is not a function

code

import ReactDOM from "react";
import createPortal from "react-dom";

export const Portal = ({ children }) => {
  const el = document.getElementById("portal");
  return ReactDOM.createPortal(children, el);
};


import React from "react";
import styled from "styled-components";
import { Portal } from "./Portal";

type Props = {
  isOpen: boolean;
  children: React.ReactNode;
  onClose: () => void;
};

export const Drawer = (props: Props) => {
  return (
    <Portal>
      <Overlay isOpen={props.isOpen} onClick={props.onClose} />
      <DrawerModal {...props}>{props.children}</DrawerModal>
    </Portal>
  );
};

const DrawerModal = styled.div<Props>`
  position: absolute;
  overflow: scroll;
  top: 0;
  right: 0;
  height: 100vh;
  width: ${({ isOpen }: Props) => (isOpen ? 400 : 0)}px;
  background: #ffffff;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
  transition: 200ms cubic-bezier(0.25, 0.1, 0.24, 1);
`;

const Overlay = styled.div<{ isOpen: boolean }>`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: ${(props: { isOpen: boolean }) => (props.isOpen ? 0 : -1)};
`;
yyy rrr
  • 57
  • 1
  • 7

1 Answers1

1

Try import ReactDOM from 'react-dom'; instead of import ReactDOM from 'react';

import ReactDOM from 'react-dom'; // Update this line

export const Portal = ({ children }) => {
  const el = document.getElementById("portal");
  return ReactDOM.createPortal(children, el);
};
Anh Nhat Tran
  • 561
  • 1
  • 6
  • 18