{"action":"created","issue":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/2600","repository_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap","labels_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/2600/labels{/name}","comments_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/2600/comments","events_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/2600/events","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/2600","id":224914354,"number":2600,"title":"Modal has issues when invoked in a class: Cannot read property 'getDialogElement' of null","user":{"login":"turboki","id":4424121,"avatar_url":"https://avatars0.githubusercontent.com/u/4424121?v=4","gravatar_id":"","url":"https://api.github.com/users/turboki","html_url":"https://github.com/turboki","followers_url":"https://api.github.com/users/turboki/followers","following_url":"https://api.github.com/users/turboki/following{/other_user}","gists_url":"https://api.github.com/users/turboki/gists{/gist_id}","starred_url":"https://api.github.com/users/turboki/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/turboki/subscriptions","organizations_url":"https://api.github.com/users/turboki/orgs","repos_url":"https://api.github.com/users/turboki/repos","events_url":"https://api.github.com/users/turboki/events{/privacy}","received_events_url":"https://api.github.com/users/turboki/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":22,"created_at":"2017-04-27T21:11:16Z","updated_at":"2017-07-30T03:41:20Z","closed_at":null,"body":"Hey all,\r\n\r\nIm 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`.\r\n\r\nhere is my code snippet, lifted directly from your site, but adopted for a component:\r\n\r\n```\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport {Modal} from 'react-bootstrap';\r\n\r\nexport default class ModalDemo extends React.Component {\r\n\r\n  constructor(props) {\r\n    super(props);\r\n    this.state = {\r\n      showModal: false\r\n    }\r\n    this.close = this.close.bind(this);\r\n    this.open = this.open.bind(this);\r\n  }\r\n\r\n  close() {\r\n    this.setState({ showModal: false });\r\n  }\r\n\r\n  open() {\r\n    this.setState({ showModal: true });\r\n  }\r\n  render() {\r\n    return (\r\n        <div>\r\n          <p>Click to get the full Modal experience!</p>\r\n\r\n          <Button\r\n            bsStyle=\"primary\"\r\n            bsSize=\"large\"\r\n            onClick={this.open}\r\n          >\r\n            Launch demo modal\r\n        </Button>\r\n\r\n          <Modal show={this.state.showModal} onHide={this.close}>\r\n            <Modal.Header closeButton>\r\n              <Modal.Title>Modal heading</Modal.Title>\r\n            </Modal.Header>\r\n            <Modal.Body>\r\n              <h4>Text in a modal</h4>\r\n              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>\r\n            </Modal.Body>\r\n            <Modal.Footer>\r\n              <Button onClick={this.close}>Close</Button>\r\n            </Modal.Footer>\r\n          </Modal>\r\n        </div>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\nWhen 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.\r\n\r\nIt'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. "},"comment":{"url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/comments/318875900","html_url":"https://github.com/react-bootstrap/react-bootstrap/issues/2600#issuecomment-318875900","issue_url":"https://api.github.com/repos/react-bootstrap/react-bootstrap/issues/2600","id":318875900,"user":{"login":"89465127","id":662476,"avatar_url":"https://avatars0.githubusercontent.com/u/662476?v=4","gravatar_id":"","url":"https://api.github.com/users/89465127","html_url":"https://github.com/89465127","followers_url":"https://api.github.com/users/89465127/followers","following_url":"https://api.github.com/users/89465127/following{/other_user}","gists_url":"https://api.github.com/users/89465127/gists{/gist_id}","starred_url":"https://api.github.com/users/89465127/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/89465127/subscriptions","organizations_url":"https://api.github.com/users/89465127/orgs","repos_url":"https://api.github.com/users/89465127/repos","events_url":"https://api.github.com/users/89465127/events{/privacy}","received_events_url":"https://api.github.com/users/89465127/received_events","type":"User","site_admin":false},"created_at":"2017-07-30T03:41:20Z","updated_at":"2017-07-30T03:41:20Z","body":"Also having this issue. Anyone find a workaround?"}}
{"actor":{"display_login":"89465127"}}