I use Next.js for my react app, and i met this problem while using 'createPortal'. I spent almost a day for this problem, but still not solved... I check this code from only react app, but i can't find any problems. and it drive me crazy.(actually not really same code but almost correct!!) plz help me guys :(
NavBar.tsx
// NavBar.tsx (to controll Modal.tsx)
const [ modalClick, setModalClick ] = useState(false);
const modalOpen = () => { setModalClick(true); }
const modalClose = () => { setModalClick(false); }
<p id = "link" onClick = { modalOpen }>Register</p>
<div>
{modalClick && <Modal component = {<LogIn/>}
closePortal = { modalClose }
selector = "#portal"/>}
</div>
_documents.tsx
// _documents.tsx
<body>
<Main/>
<NextScript/>
<div id = "portal"/>
</body>
Modal.tsx
// Modal.tsx
import React, { useState, useEffect, useRef } from "react";
import { createPortal } from "react-dom";
const Modal = ({ closePortal, component, selector }: any) => {
const [modalOpen, setModalOpen] = useState(false);
const ref = useRef<any>();
useEffect(() => {
setModalOpen(true);
document.body.style.overflow = "hidden";
if(document){
console.log("plz help me");
ref.current = document.querySelector(selector);
}
return () => {
setModalOpen(false);
document.body.style.overflow = "unset"
};
}, [selector]);
const exit = (e: any) => {
if(e.target === e.currentTarget){
closePortal()
}
}
if(modalOpen){
return createPortal(
<>
////////////
</>,
ref.current
)
}else return null;
};
export default Modal