MDBIcon React Unmount not working

HI @Denzil,

Can you send me a code example? I can't reproduce this issue without this.

Best, Kuba

Here you go: depends on the userState, one or another MDBDropdown will be unmounted.

The one at the bottom un-mounts just fine. Top one with MDBIcon produces the error.

If I remove MDBIcon from the top, the code will work as expected.

Hope this helps.

                <MDBNavItem>
                  {(!this.state.userState) ?
                    <MDBDropdown>
                      <MDBDropdownToggle className="dopdown-toggle" nav caret>
                      <MDBIcon icon="user"/>
                      </MDBDropdownToggle>
                      <MDBDropdownMenu color="secondary" className="dropdown-default">
                        <MDBDropdownItem onClick={this.handleLoginClick}>Login</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                    :
                    <MDBDropdown>
                      <MDBDropdownToggle className="dopdown-toggle" nav caret>
                        <img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg"
                             className="rounded-circle z-depth-0"
                             style={{height: "35px", padding: 0}} alt=""/>
                      </MDBDropdownToggle>
                      <MDBDropdownMenu color="secondary" className="dropdown-default" right>
                        <MDBDropdownItem>My account</MDBDropdownItem>
                        <MDBDropdownItem onClick={this.handleLogoutClick}>Log out</MDBDropdownItem>
                      </MDBDropdownMenu>
                    </MDBDropdown>
                  }
                </MDBNavItem>

@Denzil,

look at this code snippet, it works for me.

import React, { Component } from 'react';
import {
  MDBNavItem,
  MDBDropdown,
  MDBDropdownToggle,
  MDBIcon,
  MDBDropdownMenu,
  MDBDropdownItem
} from 'mdbreact';

class App extends Component {
  state = {
    userState: true
  };

  handleLoginClick = () => {
    this.setState({
      userState: true
    });
  };

  handleLogoutClick = () => {
    this.setState({
      userState: false
    });
  };

  render() {
    return (
      <MDBNavItem>
        {!this.state.userState ? (
          <MDBDropdown>
            <MDBDropdownToggle className='dopdown-toggle' nav caret>
              <MDBIcon icon='user' />
            </MDBDropdownToggle>
            <MDBDropdownMenu color='secondary' className='dropdown-default'>
              <MDBDropdownItem onClick={this.handleLoginClick}>
                Login
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        ) : (
          <MDBDropdown>
            <MDBDropdownToggle className='dopdown-toggle' nav caret>
              <img
                src='https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg'
                className='rounded-circle z-depth-0'
                style={{ height: '35px', padding: 0 }}
                alt=''
              />
            </MDBDropdownToggle>
            <MDBDropdownMenu
              color='secondary'
              className='dropdown-default'
              right
            >
              <MDBDropdownItem>My account</MDBDropdownItem>
              <MDBDropdownItem onClick={this.handleLogoutClick}>
                Log out
              </MDBDropdownItem>
            </MDBDropdownMenu>
          </MDBDropdown>
        )}
      </MDBNavItem>
    );
  }
}

export default App;

Let me know when you check if my solution works

Best, Kuba

Hi,

Thanks, but it doesn't work for me. I copied your code in full and tried, but received the same error:

my node version: v13.6.0 npm version: 6.13.4

Hope this helps.

As soon as I remove MDBIcon code starts working

modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:33395 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:33395:18)
at unmountHostComponents (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:46609:9)
at commitDeletion (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:46689:5)
at commitMutationEffects (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:49116:11)
at HTMLUnknownElement.callCallback (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:24129:14)
at Object.invokeGuardedCallbackDev (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:24178:16)
at invokeGuardedCallback (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:24233:31)
at commitRootImpl (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:48843:9)
at unstable_runWithPriority (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:52363:12)
at runWithPriority$2 (http://localhost:3000/packages/modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:35942:10)

removeChild @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:33395 unmountHostComponents @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:46609 commitDeletion @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:46689 commitMutationEffects @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:49116 callCallback @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:24129 invokeGuardedCallbackDev @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:24178 invokeGuardedCallback @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:24233 commitRootImpl @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:48843 unstable_runWithPriority @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:52363 runWithPriority$2 @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:35942 commitRoot @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:48715 finishSyncRender @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:48122 performSyncWorkOnRoot @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:48100 (anonymous) @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:35992 unstable_runWithPriority @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:52363 runWithPriority$2 @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:35942 flushSyncCallbackQueueImpl @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:35987 flushSyncCallbackQueue @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:35975 discreteUpdates$1 @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:48216 discreteUpdates @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:25231 dispatchDiscreteEvent @ modules.js?hash=465e6592c8a4b75901219a40a7cd7007570971bd:29674 backend.js:6 The above error occurred in the component: in Fa (created by Info) in a (created by InnerReference) in InnerReference (created by Context.Consumer) in Reference (created by DropdownToggle) in DropdownToggle (created by Info) in div (created by Dropdown) in Manager (created by Dropdown) in Dropdown (created by Info) in li (created by NavItem) in NavItem (created by Info) in Info (created by App) in div (created by App) in App

Hi @Denzil,

It looks like a bug in your project because it really works in my environment.

Please delete your node_modules folder and package-lock.json/yarn.lock or both and hit npm I or yarn to install a dependency. If it won't work please show me much more of your code. You can show me your repository and I will try to check what's wrong with this.

Best

Thanks, I'll have a look later, I might have a work around, if it doesn't work, I'll try on empty project. I have tried removing modules already.