So i have watched this great tutorial on how to create a modal: https://www.youtube.com/watch?v=9DwGahSqcEc

And I have made it work. But the problem is that the guy in the video creates both the button and the modal all at the same place, and then he calls it in his App.js as <Modal />

But in my case, I have the button in the main navbar, and when I click the button the modal opens inside the navbar, which is not optimal.

I have tried many things, but I am sadly not able to separate the button from the modal component, such that the button calls the function outside of the navbar.

The modal component looks like this:

import React, { useState } from "react";

export default function Modal() {
  const [modal, setModal] = useState(false);

  const toggleModal = () => {
    setModal(!modal);
  };

  if (modal) {
    document.body.classList.add("active-modal");
  } else {
    document.body.classList.remove("active-modal");
  }

  return (
    <>
      <button
        onClick={toggleModal}
        className="btn-modal"
        
        type="button"
      >
        Login
      </button>

      {modal && (
      
          <div >
            <div >
              <div >
                <button
                  className="close-modal"
                  onClick={toggleModal}
                  type="button"
                  
                >
                  <svg
                    
                    fill="currentColor"
                    viewBox="0 0 20 20"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <path
                      fill-rule="evenodd"
                      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                      clip-rule="evenodd"
                    ></path>
                  </svg>
                </button>
              </div>
              <form
                
                action="#"
              >
                <h3 >
                  Sign in to our platform
                </h3>
                <div>
                  <label
                    for="email"
                    
                  >
                    Your email
                  </label>
                  <input
                    type="email"
                    name="email"
                    id="email"
                    
                    placeholder="[email protected]"
                    required
                  ></input>
                </div>
                <div>
                  <label
                    for="password"
                    
                  >
                    Your password
                  </label>
                  <input
                    type="password"
                    name="password"
                    id="password"
                    placeholder="••••••••"
                    
                    required
                  ></input>
                </div>
                <div >
                  <div >
                    <div >
                      <input
                        id="remember"
                        aria-describedby="remember"
                        type="checkbox"
                        
                        required
                      ></input>
                    </div>
                    <div >
                      <label
                        for="remember"
                        
                      >
                        Remember me
                      </label>
                    </div>
                  </div>
                  <a
                    href="#"
                    
                  >
                    Lost Password?
                  </a>
                </div>
                <button
                  type="submit"
                  
                >
                  Login to your account
                </button>
                <div >
                  Not registered?{" "}
                  <a
                    href="#"
                    
                  >
                    Create account
                  </a>
                </div>
              </form>
            </div>
          </div>
      )}
    </>
  );
}

CodePudding user response：

That is a common issue with react which can be solved with react portals. Try to read and understand how they work, this will help you understand my answer.

Short explanation: First you have to split your modal component into a ModalButton and a Modal. Then you can use the ReactDOM.createPortal function, to render the content of the Modal component somewhere else. In my example, it will be rendered into the body element instead of the navigation.

  return ReactDOM.createPortal(
    <div>
...
    </div>,
    document.body
  );

Here is a codesandbox with a working in detail example with your code.