Dropdown isOpen is not working

Topic: Dropdown isOpen is not working

moondaddi free 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;

Add comment

Jakub Mandra staff answered 6 years ago

0 0 Best answer

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:
<pre>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="/">
 Navbar
 </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;
</pre>
Best regards, 
Jakub from MDB

Please insert min. 20 characters.

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

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

ForumUser: Free
Premium support: No
Technology: MDB React
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: Yes
Provided link: No

moondaddi

0Support score
1Questions 0Answers 0Snippets