I searched, I really did and couldn't find the exact answer to what I'm looking for. 

I have a component for my nav, it works nicely except when it's in a responsive state, it won't activate the state to hide it again. 

What I have is this which works

```
    class Nav extends React.Component {
  constructor(props) {
    super(props)
    this.addActiveClass= this.addActiveClass;
    this.state = {
      hideNavItems: true,
      active: false,
    };
  }

  toggleMenu() {
    const currentState = this.state.active;
    this.setState({
      hideNavItems: !this.state.hideNavItems,
      active: !currentState

    })
  }

  render() {
    return (
      <Wrapper>
        <Desktop>
          <Navlist className={this.props.navClass}>
            <Navitem className="logo"><a href="welcome" className="menu">Jabba's Crypt</a></Navitem>
            <MenuItem tagline="home" />
            <MenuItem tagline="projects" />
            <MenuItem tagline="about" />
            <MenuItem tagline="blog" />
            <MenuItem tagline="contact" />
          </Navlist>
        </Desktop>
        <Tablet>
          <NavitemLogo onClick={this.toggleMenu.bind(this)} className='logo'><Menu href="#" className="menu"><Sparanwrap><Icon name="bars" /></Sparanwrap>Jabba's Crypt</Menu></NavitemLogo>
          <Navlist hide={this.state.hideNavItems} className={this.state.active ? 'slidein' : 'slideout'}>
            <MenuItem tagline="home" />
            <MenuItem tagline="projects" />
            <MenuItem tagline="about" />
            <MenuItem tagline="blog" />
            <MenuItem tagline="contact" />
          </Navlist>
        </Tablet>
      </Wrapper>
    );
  }
}

export default Nav;

```

However when I add, say

```
<MenuItem tagline="projects" onClick={this.toggleMenu.bind(this)} className={this.state.active ? 'slidein' : 'slideout'} />

```

It doesn't hide the menu again. I know my code is incorrect and I know I'm missing something.