'Modal visible in HTML but on visible on app

Struggling to get my modal rendering when I click a button to show it. Here is the flow of this functionality

We start off by triggering toggle when the start coding button is clicked:

      Start Coding
      </button>
      <StartModal
        isShowing={isShowing}
        hide={toggle}
      />

toggle is passed down from useModal()

const { isShowing, toggle } = useModal();

userModal changes the state of isShowing to true/false

import { useState } from 'react';

const useModal = () => {
    const[isShowing, setIsShowing] = useState(false);

    function toggle() {
        console.log('toggle is being triggered')
        setIsShowing(!isShowing);
    }
    return {
        isShowing,
        toggle,
    };
};

export default useModal;

At this point toggle is being triggered is console logged

StartModal then should become visible:

import React from "react";
import "../../assets/scss/modal.scss"
import ReactDOM from 'react-dom';

const StartModal = ({ isShowing, hide }) => isShowing ? ReactDOM.createPortal(
    <>
        <div className="md-modal md-effect-12">
                <div className="md-content">
                    <h3>Ready to start programming?</h3>
                    <div>
                        <p>The session will be split into 5 phases:</p>
                        <ul>
                            <li>Introductions</li>
                            <li>Pseudo-Code</li>
                            <li>Time to Code</li>
                            <li>Solution</li>
                            <li>Rating</li>
                        </ul>
                        <button
                            className="md-close"
                            onClick={hide}
                        >Close</button>
                    </div>
                </div>
        </div>
        <div className="md-overlay"></div>
    </>, document.body
) : null;

export default StartModal;

When I click the start coding button, my modal appears in my HTML. When I check the Elements tab on my browser, I see the modal showing up but cannot see it on my screen. I don't think it is a css problem because I have a z-index: 2000 property on the parent div. It seems as though the div appears outside of my react components?

Solution 1:^[1]

I think the best approach is to use it with a new div.

For example:

<body>
  <div id="root"></div>
  <div id="modal"></div>
</body>

so you can look it here: https://codesandbox.io/s/affectionate-banzai-xypu3i

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Josh Martínez García

'Modal visible in HTML but on visible on app

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]