Topic: MDBModal throws error / application breaks
Expected behavior The Modal should open without any error or warning.
Actual behavior
In one project there is following warning (in strict mode )
index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node
at div
at Transition
...
behavior in other project
not in strict mode
Uncaught Error: Unable to find node on an unmounted component.
at findHostInstanceWithWarning (vendors~app.js:61924)
at Object.findDOMNode (vendors~app.js:62614)
at Transition.updateStatus (vendors~app.js:35712)
at Transition.componentDidUpdate (vendors~app.js:35678)
at commitLifeCycles (vendors~app.js:121294)
at commitLayoutEffects (vendors~app.js:124262)
at HTMLUnknownElement.callCallback (vendors~app.js:101647)
at Object.invokeGuardedCallbackDev (vendors~app.js:101696)
at invokeGuardedCallback (vendors~app.js:101751)
at commitRootImpl (vendors~app.js:124000)
Resources (screenshots, code snippets etc.) *Projet with warning: * constructor(props) { super(props); this.state = { modal: false };
this.toggle = this.toggle.bind(this);
}
toggle = () => {
const {context} = this;
this.setState((state) => {
if (!state.modal) {
context.loadPreviewImage();
}
return {
modal: !state.modal
};
});
}
[...]
<MDBModal isOpen={this.state.modal} toggle={this.toggle} size="fluid" fullHeight position="top"
inline={false} noClickableBodyWithoutBackdrop overflowScroll>
Projekt with error
in parent Component
togglePreview = () => {
this.setState((state) => {
return {
preview: !state.preview
}
});
}
[...]
<PreviewModal data={this.state.data} toggleHandler={this.togglePreview} isOpen={this.state.preview}/>
in child component:
<MDBModal isOpen={this.props.isOpen} size="fluid" toggle={this.props.toggleHandler} inline={false} noClickableBodyWithoutBackdrop overflowScroll >
Closed
This topic is closed.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Closed
- User: Pro
- Premium support: Yes
- Technology: MDB React
- MDB Version: 5.0.1
- Device: PC
- Browser: Chrome/Firefox (newest)
- OS: Linux (Ubuntu/Manjaro)
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 4 years ago
We don't use the findDOMNode property in our components. This is a problem with react-transition-group because transition based on that library, we don't have a solution for it.