CODEWITHSUNDEEP
javascriptreactjsstyled-components
thomasna82
thomasna82

Reputation: 143

How to toggle elements with a button press in React?

I have searched for 3 freaking days to find out how to toggle my mobile nav button to toggle my mobile menu. I am new to React and could do this easily with jQuery but I don't want to use jQuery. I have line for line copied an example that I found on how to show or hide an element. I can not get it to work. Any help would be much appreciated. I am using styled-components with React.

Button sub-component:

import React, { Component } from 'react';

class MenuButton extends Component {
  render() {
    return (
      <Button onClick={this.props.toggleMenu}>
        <Menu></Menu>
      </Button>
    )
  }
}

export default MenuButton;

Menu sub-component: 

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

class Menu extends Component {
  render() {
    return (
      <OffCanvasMenu>
        <Title>Menu</Title>
        <Nav>
          <NavLinks><Link to='/'>Home</Link></NavLinks>
          <NavLinks><Link to='/about'>About</Link></NavLinks>
          <NavLinks><Link to='/interactive'>Interactive</Link></NavLinks>
          <NavLinks><Link to='/ideas'>Ideas</Link></NavLinks>
          <NavLinks><Link to='/contact'>Contact</Link></NavLinks>
        </Nav>
      </OffCanvasMenu>
    )
  }
}

export default Menu;

Menu Container component with all the state: 

import React, { Component } from 'react';

import Menu from './Menu';
import MenuButton from './MenuButton';

class MenuContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      active: false
    }
    this.toggleMenu = this.toggleMenu.bind(this);
  }

  toggleMenu() {
    const { active } = this.state;
    this.setState({
      //toggle value of `active`
      active: !active
    });
  }

  render() {
    return (
      <div>
        <MenuButton onClick={this.toggleMenu}/>
        {this.state.active && <Menu/>}
      </div>
    )
  }
}

export default MenuContainer;

I can see a checkbox in ReactDev tools that shows MenuContainer has state but when the button is clicked it does not toggle the state.

Upvotes: 0

Views: 833

Answers (1)

Dario
Dario

Reputation: 6280

onClick is handled by MenuButton component which in turns invokes toggleMenu function passed as a property. I would pass toggleMenu as property of MenuButton:

 <MenuButton toggleMenu={this.toggleMenu} />

Upvotes: 2

Related Questions