CODEWITHSUNDEEP
javascriptreactjsreact-routergatsby
thomasna82
thomasna82

Reputation: 143

SlideMenu won't close if link clicked in React

I have an off canvas menu that slides in when isOpen is toggled to true. The problem is it won't slide back out on a Link click to go to another page. The page loads but the mobile off canvas menu fills 100% of the screen.

Header.js

class HeaderContainer extends Component {
  state = { isMobile: false }


  componentDidMount() {
    this.updateHeader();
    window.addEventListener('resize', this.updateHeader);
  }

  componentWillUnMount() {
    window.removeEventListener('resize', this.updateHeader);
  }

  updateHeader = () => {
    this.setState({ isMobile: window.innerWidth < 960 });
  }

  render() {
    const { isMobile } = this.state;
    return (
      <header>
        { isMobile  ? <MobileNav/> : <DesktopNav/> }
      </header>
    );
  }
}

MobileNav.js

class MobileNav extends Component {
  state = { isOpen: false  }

  toggleMenu = (event) => {
    event.preventDefault();
    this.setState({ isOpen: !this.state.isOpen });
  }

  render() {
    const { isOpen } = this.state;
    return (
      <div>
        <MenuButton 
          toggleMenu={this.toggleMenu}
          isOpen={isOpen}/>
        <SlideMenu isOpen={isOpen}/>
      </div>
    );
  }
}

export default MobileNav;

SlideMenu.js

const SlideMenu = (props) => {


return (
    <Menu isOpen={props.isOpen}>
      <Nav>
        <StyledLink  exact to="/" activeClassName="selected">Home</StyledLink>
        <StyledLink to="/about" activeClassName="selected">About</StyledLink>
        <StyledLink to="/contact" activeClassName="selected">Contact</StyledLink>
      </Nav>
    </Menu>
  );
}

Here is a screenshot of what I am talking about.
enter image description here

Upvotes: 1

Views: 669

Answers (2)

Uchit Kumar
Uchit Kumar

Reputation: 677

slideMenu has no function to toggle isOpen state. Onclick on styledlink .. this.props.toggleMenu should be called and event.ptreventDefault() should be removed from toglemenu

As discussed in the comment this will work.

Upvotes: 1

mihauco
mihauco

Reputation: 126

Instead of state, use prevState this.setState(prevState => {isOpen => !prevState.isOpen})

Upvotes: 0

Related Questions