Dropdown isOpen is not working


Topic: Dropdown isOpen is not working

moondaddi free asked 4 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 answered 4 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


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
Tags