Dropdown isOpen is not working

  1. MDB Home Page
  2. Support Main Page
  3. MDB React
Topic: Dropdown isOpen is not working

moondaddi asked 6 years ago

I\'d like to implement dropdown menu show when mouse enters in menu in navbar. I tried to use sample code as below. but console shows errror.

Warning: React does not recognize the `isOpen` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `isopen` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

So, I tried to change to lowcase to isopen, it\'s not working either.

class Header extends React.Component {constructor(props) {
super(props);
this.state= {
collapse:false,
isWideEnough:false,
dropdownOpen:false
};

this._onClick=this._onClick.bind(this);
this._toggle=this._toggle.bind(this);
}

_onClick= () => {
this.setState({
collapse:!this.state.collapse
});
};

_toggle= () => {
this.setState({
dropdownOpen:!this.state.dropdownOpen
});
};

render() {
return (
<Navbardarkexpand=\"md\"fixed=\"top\"scrolling>
<Container>
<NavbarBrandhref=\"/\">
<strong>Navbar</strong>
</NavbarBrand>
{!this.state.isWideEnough && (<NavbarToggleronClick={this._onClick}/>)}
<CollapseisOpen={this.state.collapse} navbar>
<NavbarNavleft>
<NavItem>
<Dropdown isOpen={this.state.dropdownOpen} toggle={() =>\"dummy\"} onMouseEnter={this._toggle} onMouseLeave={this._toggle}>
<DropdownTogglenav>Dropdown</DropdownToggle>
<DropdownMenu>
<DropdownItemhref=\"#\">Action</DropdownItem>
<DropdownItemhref=\"#\">Another Action</DropdownItem>
<DropdownItemhref=\"#\">Something else here</DropdownItem>
<DropdownItemhref=\"#\">Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</NavItem>
</NavbarNav>
</Collapse>
</Container>
</Navbar>
);
}}

export default Header;

 

Jakub Mandra staff premium answered 6 years ago

Hello,

Thank you for posting that issue.

We updated the MDB React's dropdown component and it looks like we forgot to update the documentation for Navbar.

It will be repaired thanks to you.

Here is the working example for you:

import React from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: false,
      isWideEnough: false,
      dropdownOpen: false
    };
    this.onClick = this.onClick.bind(this);
  }

  onClick() {
    this.setState({
      collapse: !this.state.collapse,
    });
  }

  render() {
    return (
      <Router>
        <Navbar color="indigo" dark expand="md" scrolling>
          <NavbarBrand href="/">
            <strong>Navbar</strong>
          </NavbarBrand>
          {!this.state.isWideEnough && <NavbarToggler onClick={this.onClick} />}
          <Collapse isOpen={this.state.collapse} navbar>
            <NavbarNav left>
              <NavItem>
                <Dropdown>
                  <DropdownToggle nav caret color="primary">
                    Material dropdown
                  </DropdownToggle>
                  <DropdownMenu>
                    <DropdownItem href="#">Action</DropdownItem>
                    <DropdownItem href="#">Another Action</DropdownItem>
                    <DropdownItem href="#">Something else here</DropdownItem>
                    <DropdownItem href="#">Something else here</DropdownItem>
                  </DropdownMenu>
                </Dropdown>
              </NavItem>
            </NavbarNav>
          </Collapse>
        </Navbar>
      </Router>
    );
  }
}

export default App;

Best regards,
Jakub from MDB

Write
Create snippet
Please insert min. 20 characters.

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: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
moondaddi
0Support score
1Questions 0Answers
0Snippets likes 0Snippets