Bootstrap: Toggler not displaying its content

Question

I am building a basic website with React, using also Reactstrap (bootstrap 4 documentation). I have a basic Navbar with some items and a toggler button when the width of the viewport is small. Problem is when clicked on the toggler it does not display anything. Why? When the screen returns in large width, though, the dropdown menu of the services tab it appears open so it seems that the toggler somehow it is only linked to it and not to the whole navbar. Ideas?

Navbar:

export default class MainNavBar extends React.Component {
  constructor(props) {
    super(props);

    this.scrolNav = this.scrolNav.bind(this);
    this.toggle = this.toggle.bind(this);
    this.state = {
      class_up: 'whentop',
      class_down: 'nav_top',
      dropdownOpen: false
    };
  }

// prova scroll adaptive navbar

componentDidMount() {
    window.addEventListener('scroll', this.scrolNav);
}


componentWillUnmount() {
    window.removeEventListener('scroll', this.scrolNav)
}


scrolNav() {
    const scrolly = window.scrollY;
    if (scrolly > 80) {
        this.setState({
          class_up: 'whenscroll',
          class_down: 'nav_down'
        })
    }   
    else if (scrolly < 80) {
        this.setState({
          class_up: 'whentop',
          class_down: 'nav_top'
        });

    }
}


  toggle() {
    this.setState({
      dropdownOpen: !this.state.dropdownOpen
    });
  }


  render() {
    return (
      <div  className={this.state.class_up}>
        <Navbar className={this.state.class_down} color="light" light expand="md">
        <a href="/"><img className="logonowrite" src={logoNoWrite} width="80px" alt=""/>
          <NavbarBrand id="write_logo"><img src={write} className="write_logo" alt=""/></NavbarBrand></a>
          <NavbarToggler onClick={this.toggle} />   
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
            <Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
            <DropdownToggle nav caret>
              Services
            </DropdownToggle>
            <DropdownMenu>
              <DropdownItem><Link to="/rec_services">Recruitment Solutions</Link></DropdownItem>
              <DropdownItem><Link to="/web_services">Web Design</Link></DropdownItem>
              <DropdownItem><Link to="/mark_services">SEO & Digital Marketing</Link></DropdownItem>
            </DropdownMenu>
          </Dropdown>                
              <NavItem>
              <Link className="int_link" to="/">Home</Link>
              </NavItem>
              <NavItem>
                <Link className="int_link_about" to="about">About</Link>
              </NavItem>
               <NavItem>
                <Link className="int_link_about" to="/contacts">Contacts</Link>    
               </NavItem> 
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

Answer 1

The Collapse Component <Collapse isOpen={this.state.isOpen} navbar> is searching for the state isOpen. When you click the toggler you set state of dropdownOpen and not isOpen that Collpase is searching for.

So prolly you need to change to <Collapse isOpen={this.state.dropdownOpen} navbar>

P.S not tested