How do I create a portal for this navbar (React)-CodePudding

This is my index.html (Where the portal is supposed to lead to)

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="navbarRoot"></div>
    <div id="root"></div>
  </body>

Here is my navbar component

const Navbar = () => {

const [isOpen , setIsOpen] = useState(false)

const navButtonHandler = () => {
    setIsOpen(!isOpen)
}

  return (
    <>  
    <nav className='navbar'>
         <span><img src={logo} alt='home' className='logo' /></span>
         <div className={`menuMask ${isOpen && "open"}`} onClick={navButtonHandler}></div>
         <div className={`menuContainer ${isOpen && "open"}`}>
         <ul className={`navitems ${isOpen && "open"}`}>
            <a href="/" className='home'>
                <li>Home</li>
            </a>

            <a href="/" className='whoWeHelp'>
                <li>Who We Help</li>
            </a>

            <a href="/" className='services'>
                <li>Services</li>
            </a>

            <a href="/" className='about'>
                <li>About</li>
            </a>

            <a href="/" className='caseStudies'>
                <li>Case Studies</li>
            </a>

            <li>
               <PrimaryButton link={'https://hadizouhbi.website'}>Client Login</PrimaryButton>
            </li>

            <li>
                <SecondaryButton link={'https://hadizouhbi.website'}>Contact</SecondaryButton>
            </li>
         </ul>
         </div>

         <div className={`navToggle ${isOpen && "open"}`}  onClick={navButtonHandler}>
            <div className='bar'>
                
            </div>
         </div>
    </nav>
    </>
  )
}

Where in the code do I use this

{ReactDom.createPortal(<Navbar />, document.getElementById('navbarRoot'))}

Am i doing something wrong? because I have no idea where to put that line however I do think the syntax for that is correct just where to put it is the issue. Any help is greatly appreciated ! I am a beginner to react

CodePudding user response：

the code {ReactDom.createPortal(<Navbar />, document.getElementById('navbarRoot'))} goes inside the return statement.

eg:

import Navbar from "component"

function MainPage(){
   ...
   ...

   return(
      <> 
         ...
        {ReactDom.createPortal(<Navbar />, document.getElementById('navbarRoot'))}
      </>
   );
}

CodePudding user response：

If you meant to render the whole NavBar component as a portal then return in the Navbar should be like below.

import { useState } from "react";
import ReactDOM from "react-dom";

const domNode = document.getElementById("navbarRoot");

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);

  const navButtonHandler = () => {
    setIsOpen(!isOpen);
  };

  const navContent = (
    <>
      <nav className="navbar">
        <span>{/* <img src={logo} alt="home" className="logo" /> */}</span>
        <div
          className={`menuMask ${isOpen && "open"}`}
          onClick={navButtonHandler}
        ></div>
        <div className={`menuContainer ${isOpen && "open"}`}>
          <ul className={`navitems ${isOpen && "open"}`}>
            <a href="/" className="home">
              <li>Home</li>
            </a>

            ...
            ...
          </ul>
        </div>

        <div
          className={`navToggle ${isOpen && "open"}`}
          onClick={navButtonHandler}
        >
          <div className="bar"></div>
        </div>
      </nav>
    </>
  );

  return ReactDOM.createPortal(navContent, domNode);
};

Use Navbar in any other place. In spite of where you try to render it in your component tree, it will always appear in the div with navbarRoot as the id.

export default function App() {
  return (
    <div className="App">
      <Navbar />
    </div>
  );
}