Alert dissmiss not working

Topic: Alert dissmiss not working

Expected behavior

Close alert on "x" click icon

Actual behavior

Click on "x" icon crashed with exeption: Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. at removeChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:8874:18) at unmountHostComponents (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17851:9) at commitDeletion (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:17904:5) at commitAllHostEffects (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18685:11) at HTMLUnknownElement.callCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:149:14) at Object.invokeGuardedCallbackDev (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:199:16) at invokeGuardedCallback (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:256:31) at commitRoot (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:18913:7) at eval (webpack-internal:///./node_modules/react-dom/cjs/react-dom.development.js:20418:5) at Object.unstable_runWithPriority (webpack-internal:///./node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js:255:12)

Resources (screenshots, code snippets etc.)

<MDBContainer>
      <MDBAlert color="warning" dismiss>
        <strong>Holy guacamole!</strong> You should check in on some of those fields below.
      </MDBAlert>
    </MDBContainer>

Add comment

Aliaksandr Andrasiuk staff answered 6 years ago

0 0 Best answer

Hello,

Can you send me the full code of your application?

Also, you can try our new 4.13.0 version of MDB React:

https://mdbootstrap.com/download/mdb-react/free/4.13.0_081525a33affeee836df9bae56b9b92f/MDB-React-Free-npm.zip

Add comment

famu1hundred answered 5 years ago

0 0 Best answer

I am seeing the same error and I have mdbreact version 4.16.0

this.state = {alert: true}
...
render () {
return (
    <MDBContainer>
        { this.state.alert &&
        <MDBAlert dismiss onClick={()=>this.setState({alert:false})}>
            Success message
        </MDBAlert>
        }
    </MDBContainer>
  )
}

Aliaksandr Andrasiuk staff commented 5 years ago

Hi,

Can you try to upgrade the mdbreact version to the latest(4.18.0)?

Is it the only code in your application or it's a part of it? If it's a part, can you show me the full code, please?

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: Free
Premium support: No
Technology: MDB React
MDB Version: 4.11.1
Device: laptop
Browser: all
OS: windows
Provided sample code: No
Provided link: No

About author

Oleksandr Shkel

5Support score
1Questions 0Answers

0Snippets likes 0Snippets