Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: MDBModal throws error / application breaks

trixie priority asked 3 years ago


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 >

Piotr Glejzer staff commented 3 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.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • 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