Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can we have a portal in NEXT JS

I'm using Next.js with my React app, and I'm having a trouble with creating modal in portal, it throws an error 'Target container is not a DOM element.', here is my code.

import React, { useEffect } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import classes from './listModal.scss';

const EditorListModal = (props) => {
  let container;
  if (typeof window !== 'undefined') {
    const rootContainer = document.createElement('div');
    const parentElem = document.querySelector('#__next');
    parentElem.appendChild(rootContainer);
    container = rootContainer;
  }
  const isShown = props.show ? classes['editor-listModal--open'] : '';
  const element = (
    <div className={`${classes['editor-listModal']} ${isShown}`}>
      // Modal Content
    </div>
  );

  return ReactDOM.createPortal(element, container);
};

EditorListModal.propTypes = {
  show: PropTypes.bool
};

export default React.memo(EditorListModal);
like image 395
Armen Nersisyan Avatar asked Dec 18 '19 14:12

Armen Nersisyan


2 Answers

Accepted answer is not the best option. You may have lots of render issues when server rendered content differs from the client's. The main idea is to have the same content during SSR and hydration. In your case it would be more accurate to load modal dynamically with { ssr: false } option.

As the second option take a note at next's example. There they always return null during initial render both on server and client and that's a correct approach.

like image 53
likerRr Avatar answered Sep 21 '22 12:09

likerRr


It's going to break during the ssr because the container is not initialized. You could try to skip rendering when there is no portal:

return container ? ReactDOM.createPortal(element, container) : null;
like image 28
Evgeny Timoshenko Avatar answered Sep 22 '22 12:09

Evgeny Timoshenko