react-bootstrap: Modal has issues when invoked in a class: Cannot read property 'getDialogElement' of null

Hey all,

Im trying to use the modal in a react class and I’m running into Cannot read property 'getDialogElement' of null and Cannot read property 'remove' of null.

here is my code snippet, lifted directly from your site, but adopted for a component:

import React from 'react';
import ReactDOM from 'react-dom';
import {Modal} from 'react-bootstrap';

export default class ModalDemo extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    }
    this.close = this.close.bind(this);
    this.open = this.open.bind(this);
  }

  close() {
    this.setState({ showModal: false });
  }

  open() {
    this.setState({ showModal: true });
  }
  render() {
    return (
        <div>
          <p>Click to get the full Modal experience!</p>

          <Button
            bsStyle="primary"
            bsSize="large"
            onClick={this.open}
          >
            Launch demo modal
        </Button>

          <Modal show={this.state.showModal} onHide={this.close}>
            <Modal.Header closeButton>
              <Modal.Title>Modal heading</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              <h4>Text in a modal</h4>
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
            </Modal.Body>
            <Modal.Footer>
              <Button onClick={this.close}>Close</Button>
            </Modal.Footer>
          </Modal>
        </div>
    );
  }
}

When this code executes however I get the first error on show and the transition animation does not play and its this line var dialogNode = this._modal.getDialogElement(); in Modal.js that triggers it, because _modal is null. Breakpointing through the code, the issue seems to be happening because when the render method is called. When the page first loads, the render method is called, and this function ref={c => { this._modal = c; }} is invoked with c being the Modal object. However when the state changes (in this case pushing the button, c resolved to null and overrides the initial prop. Any functions that have to call Modal properties on _modal now fail.

It’s very possible I missed something here and there is an issue with my code, but I can’t seem to get this working properly within my context.

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 17
Comments: 40 (7 by maintainers)

Most upvoted comments

FWIW, I encountered a similar sounding error, and it was because I wasn’t loading the module correctly, viz. a viz.:

import { Modal } from 'react-bootstrap/lib/Modal' // <-- WRONG
import Modal from 'react-bootstrap' // <-- WRONG

import { Modal } from 'react-bootstrap' // <-- JOY
import Modal from 'react-bootstrap/lib/Modal' // <-- JOY

+13

aosalias on Jun 13, 2017

In React 16 this bug is present again. (2)

henriquecf on Oct 10, 2017

In React 16 this bug is present again.

marcindabrowski on Oct 3, 2017

+1 having the same issue just trying to use jest test on a simple modal. I tried to create a simple reproducible scenario…

The component under test: ConfirmModal.jsx

import React from 'react'
import Modal from 'react-bootstrap/lib/Modal'

export default ({show, onCancel, onConfirm, confirmTitle, confirmBody}) => (
  <Modal show backdrop={true} onHide={onCancel}>
    <Modal.Header>
      <Modal.Title>
        {confirmTitle}
      </Modal.Title>
    </Modal.Header>
    {!confirmBody ? null : <Modal.Body>
      {confirmBody}
    </Modal.Body>}
    <Modal.Footer>
      {/*Custom cancel and delete buttons here, but not relevant to this test*/}
    </Modal.Footer>
  </Modal>
)

The FAILING jest test //TypeError: Cannot read property 'getDialogElement' of undefined

import React from 'react'
import renderer from 'react-test-renderer';
const noOpp = x => x

import Foo from '../../../../src/components/Common/Modals/testComponent'

describe("<foo />", () => {
  describe("When given minimum required values", () => {
    it("renders correctly", () => {
      const render = renderer.create(
        <Foo show
                      confirmTitle="Some title text"
                      confirmBody="Some body text"
                      onCancel={noOpp}
                      onConfirm={noOpp}
        />
      ).toJSON();
      expect(render).toMatchSnapshot()
    })
  })
})

StJohn3D on May 23, 2017

Also getting Cannot read property 'getDialogElement' of null and Cannot read property remove of undefined on react-bootstrap@0.31.0, have the same basic setup

ElTav on May 5, 2017

For anyone with this issue that is using Yarn, adding this to my package.json cleared this up for me:

"resolutions": {
  "react": "^15.6.1",
  "react-dom": "^15.6.1"
}

Reference: Selective dependency resolutions

dizlexik on Sep 29, 2017

I was having the same issue when running jest specs and most of the time I solved the problem by adding

jest.mock('react-bootstrap')

at the top of the jest spec.

timurcatakli on Aug 21, 2017

I’ll open a new issue to point out some of my findings.

In the mean time, here is a very simple reproduction of the issue: https://github.com/aljachimiak/test-react-bootstrap-modal

aljachimiak on Oct 11, 2017

@rmlevangelio I don’t remember. We moved off of react-bootstrap to reactstrap a while ago because it supported bootstrap 4

StJohn3D on Jun 4, 2019

@StJohn3D Did you ever managed to make your tests work without updating the library?

rmlevangelio on Jan 26, 2019

A conflict between the versions is the first thing I thought, I checked, the versions were the same: modal-custom.component repo react-bootstrap@0.30.10 │ ├── classnames@2.2.5 │ ├── dom-helpers@3.2.1 │ ├── invariant@2.2.2 │ ├── keycode@2.1.9 │ ├── react-overlays@0.6.12 │ ├── react-prop-types@0.4.0 │ ├── uncontrollable@4.1.0 │ └── warning@3.0.0

modal-demo.component repo react-bootstrap@0.30.10 │ ├── dom-helpers@3.2.1 │ ├── keycode@2.1.9 │ ├── react-overlays@0.6.12 │ ├── react-prop-types@0.4.0 │ ├── uncontrollable@4.1.0 │ └── warning@3.0.0

RiccardoF on May 25, 2017

Try nuking node_modules and reinstalling. It sounds like you have an old copy over react-overlays and a new react-bootstrap

jquense on May 1, 2017

I couldn’t replicate the issue with a brand new setup, though. https://github.com/gmfvpereira/bootstrap-modal-issue

We are probably missing something here.

gmfvpereira on Apr 28, 2017