My sliding menu in React does not work?

Question

follow the tutorial but apparently does not work as it should, by pressing the button should appear the menu on the right side but it appears in this way, what is wrong?

the MenuContainer class change it to SideBar.js

all classes are inside SideBar.js

import React, { Component } from "react";

class SideBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = { visible: false };
        this.handleMouseDown = this.handleMouseDown.bind(this);
        this.toggleMenu = this.toggleMenu.bind(this);
    }

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

    handleMouseDown(e) {
        this.toggleMenu();

        console.log("clicked");
        e.stopPropagation();
    }
  render() {
    return (

    <div>

    <MenuButton handleMouseDown={this.handleMouseDown}/>
    <Menu handleMouseDown={this.handleMouseDown} menuVisibility={this.state.visible}/>
      <div>
        <div>
          <p>Can you spot the item that doesn't belong?</p>
          <ul>
            <li>Lorem</li>
            <li>Ipsum</li>
            <li>Dolor</li>
            <li>Sit</li>
            <li>Bumblebees</li>
            <li>Aenean</li>
            <li>Consectetur</li>
          </ul>
        </div>
      </div> 

      </div>
    );
  }
}
export default SideBar;

class MenuButton extends React.Component {
  render() {
    return (
      <button className="roundButton"
              onMouseDown={this.props.handleMouseDown}></button>
    );
  }
}


class Menu extends React.Component {
  render() {
    var visibility = "hide";

    if (this.props.menuVisibility) {
      visibility = "show";
    }

    return (
      <div className="flyoutMenu"
           onMouseDown={this.props.handleMouseDown} 
           className={visibility}>
        <h2><a href="#">Home</a></h2>
        <h2><a href="#">About</a></h2>
        <h2><a href="#">Contact</a></h2>
        <h2><a href="#">Search</a></h2>
      </div>
    );
  }
}

and my styles.scss

.roundButton {
  background-color: #96D9FF;
  margin-bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 10px solid #0065A6;
  outline: none;
  transition: all .2s cubic-bezier(0, 1.26, .8, 1.28);
}
.roundButton:hover {
  background-color: #96D9FF;
  cursor: pointer;
  border-color: #003557;
  transform: scale(1.2, 1.2);
}

.roundButton:active {
  border-color: #003557;
  background-color: #FFF;
}

.flyoutMenu {
  width: 100vw;
  height: 100vh;
  background-color: #FFE600;
  position: fixed;
  top: 0;
  left: 0;
  transition: transform .3s
              cubic-bezier(0, .52, 0, 1);
  overflow: scroll;
  z-index: 1000;
}

.flyoutMenu.hide {
  transform: translate3d(-100vw, 0, 0);
}

.flyoutMenu.show {
  transform: translate3d(0vw, 0, 0);
  overflow: hidden;
}

This is the image of how it is displayed when you click on it.

image

Answer 1

you mutate the state from SideBar component. Sidebar component passes down state to Menu as a prop. When you mutate this state, it should re-render the Menu component with the new value.

Your menu class would look something better like:

class Menu extends React.Component {
  render() {
    const { menuVisibility } = this.props

    return (
      <div className="flyoutMenu"
           onMouseDown={this.props.handleMouseDown}
           className={menuVisibility ? 'show' : 'hide'}>
        <h2><a href="#">Home</a></h2>
        <h2><a href="#">About</a></h2>
        <h2><a href="#">Contact</a></h2>
        <h2><a href="#">Search</a></h2>
      </div>
    );
  }