how to render modal from another component?

[raselmahmud-coder]

this is my Modal code I want to render from another component, I tried this useState true and false but never pop up, but when I use this code same block it is render. Please help me how can I render this modal from another component?

<input type="checkbox" id="add-student" class="modal-toggle" />
      <div className="modal modal-bottom sm:modal-middle">
        <div className="modal-box relative">
          <label
            htmlFor="add-student"
            className="btn btn-circle absolute right-2 top-2"
          >
            ✕
          </label>

          <form onSubmit={handleForm}>
            <input
              className="block w-10/12 p-1 rounded my-1"
              type="text"
              name="fullName"
              placeholder="Enter Full Name"
              required
            />

            <input
              className="block w-10/12 p-1 rounded my-1"
              type="number"
              name="phone"
              placeholder="Enter phone"
              required
            />
            <input
              className="block w-10/12 p-1 rounded my-1"
              type="number"
              name="registration"
              placeholder="Enter registration no"
              required
            />
            <input
              className="block w-10/12 p-1 rounded my-1"
              type="text"
              name="university"
              placeholder="Enter University"
              required
            />
            <input
              className="block w-10/12 p-1 rounded my-1"
              type="text"
              name="degree"
              placeholder="Enter Enter"
              required
            />
            {error && (
              <p className="text-red-500 text-xl text-center">
                Please give valid info
              </p>
            )}
            <div className="modal-action">
              <button typeof="submit" className="btn-xl cursor-pointer">
                Submit
              </button>
            </div>
          </form>
          <div className="modal-action"></div>
        </div>
      </div>

[saadeghi]

React's portal can render elements into existing node: https://reactjs.org/docs/portals.html
Also read this: #533