Question: react-modal will render modal content when server-side rendering?

[Clarencef]

Summary:

I use react-modal as our modal component, modal render expected content at client side. but when server-side rendering, I can't get content of modal to display. Do react-modal support modal content rendering at server-side? or just skip rendering until client side to render it?

Expected behavior:

Render Modal and display content correctly can see 'content of react-modal' at screen.

example:

import ReactModal from 'react-modal';

ReactModal.setAppElement('#root');

class ModalComponent extends Component {
    render () {
      <div>
        .... other content of component
        {showResumeModal && (
            <ReactModal
              isOpen={showResumeModal}
            >
              content of react-modal
            </ReactModal>
         )}
      </div>
    }
}

[hrafnkellbaldurs]

I'm currently using react-modal in a Gatsby site (Gatsby sites are server side rendered) and it seems to work fine for me. I don't know what tool you use to render server side, so maybe this answer will not be useful to you.

Possible issues I see in the example

• Are you importing React?
• Are you returning from the render() method?
• Where does showResumeModal come from?
• Conditional rendering of ReactModal. Try removing the condition, since you're already passing isOpen={showResumeModal} to ReactModal ( also makes open/close transitions impossible if using React 16 )

Try if this snippet works for you:

import { Component } from 'react';
import ReactModal from 'react-modal';

ReactModal.setAppElement('#root');

export default class ModalComponent extends Component {
    render () {
        /*
            Not sure where 'showResumeModal' was coming from, so maybe just make the ModalCompoent
            accept an 'isOpen' prop
        */
        const { isOpen } = this.props;
        return (
            <div>
                   <div> ...other content of component</div>
                  <ReactModal isOpen={ isOpen }>
                      <div>content of react-modal</div>
                  </ReactModal>
            </div>
         );
    }
}

[Clarencef]

@hrafnkellbaldurs thanks for your reply, I use renderToString from 'react-dom/server' to do server-side rendering.

• Are you importing React? Yes, I import React at the top of file.

• Are you returning from the render() method? Yes, I'm sure I do return at render method.

• Where does showResumeModal come from? The state come from redux initial state, and I have console the state out at server-side rendering. The state return true, so I thought it should render modal component correctly.

• Conditional rendering of ReactModal. I try to remove condition still can't render correctly.

[hrafnkellbaldurs]

@Clarencef hmmm that's strange. Try passing 'isOpen' as true into ReactModal just to see if it can render at all, to confirm that the problem is coming from ReactModal.

[Clarencef]

@hrafnkellbaldurs I try to passing 'isOpen' as true but still get nothing, thx for reply.

[hrafnkellbaldurs]

@Clarencef Can you create a small repository that reproduces this issue?

[Clarencef]

@hrafnkellbaldurs sorry for late reply, here is a repo for reproduces this issue. https://github.com/Clarencef/react-modal-debug-example Install dependency and run the server at http://localhost:8080 you will see the modal. Disable javascript at browser setting then the modal will be gone, I thought if server-side rendering success, the modal shouldn't disappear. It also should appear at view-source:localhost:8080

[melfa]

Server side rendering is not supported https://github.com/reactjs/react-modal/blob/master/src/components/Modal.js#L195 Actually, i would like to see this note in README Also see https://github.com/reactjs/react-modal/issues/580