Display custom modals in React that showcase content for a brief moment before the page refreshes

Question

Display custom modals in React that showcase content for a brief moment before the page refreshes

I recently developed a custom modal in React. When the Open button is clicked, showModal is set to true and the modal display changes to block. Conversely, clicking the Close button sets the display to none.

However, I noticed a bug where upon refreshing the page, the content of the modal briefly appears on screen for a few milliseconds.

This functionality is crucial for my application.

If you want to see it in action, check out this video link: https://youtu.be/A6CUmSzwobY

You can also view the code on CodePen by following this link:

https://codepen.io/alligatorio/pen/aYzMKL?editors=0100

Any help in identifying and resolving this issue would be greatly appreciated.

javascript css reactjs modal-dialog react-modal

Answer 1

Answer №1

If you want to ensure that the modal is only added to the DomTree when it's supposed to be open, one approach is to use return null when the modal is closed.

const Modal = ({ handleClose, show, children }) => {

  // Check if the modal is closed and return null
  if (!show) {
    return null;
  }

  // If the modal is open, render its content
  return (
    <div className={'modal display-block'}>
      <section className='modal-main'>
        {children}
        <button
          onClick={handleClose}
        >
          Close
        </button>
      </section>
    </div>
  );
};

Check out the code on Codepen: https://codepen.io/anon/pen/drojdr?editors=0111

Answer 2

If you want to ensure that the modal is only added to the DomTree when it's supposed to be open, one approach is to use return null when the modal is closed.

const Modal = ({ handleClose, show, children }) => {

  // Check if the modal is closed and return null
  if (!show) {
    return null;
  }

  // If the modal is open, render its content
  return (
    <div className={'modal display-block'}>
      <section className='modal-main'>
        {children}
        <button
          onClick={handleClose}
        >
          Close
        </button>
      </section>
    </div>
  );
};

Check out the code on Codepen: https://codepen.io/anon/pen/drojdr?editors=0111

Display custom modals in React that showcase content for a brief moment before the page refreshes

Answer №1

Similar questions

«Modify Apollo Client settings to accommodate JWT authentication»

Unscramble the pairs in this React JS two-column puzzle!

If the URL matches a specific path, then append a parameter

Angular HTML layout designed for seamless interaction

Encountered an issue loading resource: net::ERR_BLOCKED_BY_CLIENT while attempting to access NuxtJS API

Unable to access Firebase Key/Value pairs

Java script pop-up notifications always show up

The styling in CSS does not accurately reflect its relationship to the parent

Is it possible to find a more efficient approach than calling setState just once within useEffect?

Utilizing JavaScript for enhancing the appearance of code within a pre element

From jQuery to HTML to PHP, then back to HTML from PHP through jQuery

Upcoming construction: Issue encountered - The Babel loader in Next.js is unable to process .mjs or .cjs configuration files

Error handling: Encountered unexpected issues while parsing templates in Angular 2

Elevate the appearance of your UI with stylish Material text

When the screen is at mobile width, elements with the class "Responsive" are hidden using the display:none; property. These elements can be

Unable to apply Login Form Css to HTML

What exactly does Apple consider as a "user action"?

Unable to eliminate top margin in Bootstrap 3 affix feature

Filtering a subarray in Angular using ng-repeat

Tips for utilizing the randomColor library