Don't know why Portal doesn't work in my code

Viewed 63

Tell me what is mistaken. Thank you in advance.

Console error is: Error: Target container is not a DOM element.

GitHub:https://github.com/Alexander-Korniichuk/React_Practice/commit/13612103a3a73fe29242970e1648c13902bad753

src/Portals/PortalAppTwo.jsx

import React, {useRef} from "react";
import ReactDOM from "react-dom";
 
export const PortalAppTwo = () => {
    const containerLink = useRef(null);
    return (
        <>
            <div className={"block"}>
                <div className="block__place">
                    <div className="block__real-place" ref={containerLink}>
 
                    </div>
                </div>
                <div className="block__place">
                    <div className="block__face-place">
                        <Boxy link={containerLink}/>
                    </div>
                </div>
            </div>
        </>
    )
}
 
const Boxy = ({link = null}) => {
    if (link !== null) return ReactDOM.createPortal(
        <div style={{
            width: "200px",
            height: "200px",
            border: "2px solid black",
            padding: "5px",
            margin: "5px",
            backgroundColor: "peachpuff"
        }}>Boxy</div>
        , link.current)
    else {
        return null
    }
}
1 Answers

The problem is with link.current, where you are rendering your portal. It has to be a DOM element where you are rendering the div with the text 'boxy'.

Related