ReactJs toggle Button to open Menu

Question

I built a React component, Toggle Menu, which gets triggered by a button. I'm not able to see the menu open/close after the initial open. A bit lost on how to get started to fix this issue... This is the example I used for reference How to Build a Sliding Menu Using ReactJS

export default class ToggleMenu extends React.Component {

  showRight = () => {
    this.right.show();
  }


  constructor(props) {
    super(props);
    this.showRight = this.showRight.bind(this);
  }

  render() {

    return (
      <div>
        <button onClick={this.showRight}>Show Right Menu!</button>
        <Menu ref={right => this.right = right} alignment="right">
        <MenuItem hash="first-page">First Page</MenuItem>
        <MenuItem hash="second-page">Second Page</MenuItem>
        <MenuItem hash="third-page">Third Page</MenuItem>
      </Menu>
      </div>
    );
  }
}


export default class Menu extends React.Component {
    state = {
      visible: false,
    };

    show() {
      this.setState({ visible: true });
    }

    hide() {
      this.setState({ visible: false });
    }

    render() {
      const { visible } = this.state;

      return (
        <div className="menu">
          {
            visible &&
              <div className={this.props.alignment}>{this.props.children}</div>
          }
        </div>
      );
    }
}

Answer 1

By moving the State into the main ToggleMenu, you can have this component maintain the visibility of the Menu.

class ToggleMenu extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            visible: false  
        };

        this.toggleMenu = this.toggleMenu.bind(this);
    }

    toggleMenu() {
        this.setState({visible: !this.state.visible})
    }

    render() {
        return (
            <div>
                <button onClick={this.toggleMenu}>Show Right Menu!</button>
                {this.state.visible && <Menu alignment="right">
                <MenuItem hash="first-page">First Page</MenuItem>
                <MenuItem hash="second-page">Second Page</MenuItem>
                <MenuItem hash="third-page">Third Page</MenuItem>
                </Menu>}
            </div>
        );
    }
}

This allowed me to change your menu into a Stateless Component:

const Menu = ({alignment, children}) => (
    <div className="menu">
        <div className={alignment}>{children}</div>
    </div>
);

I have created a webpackbin here (now with animation): https://www.webpackbin.com/bins/-Klh1VM-n4RDCkEbkK67

For transitions and animation, I recommend you look at https://github.com/reactjs/react-transition-group