Why are my <a> tags not working inside of my sidebar Nav?-CodePudding

I'm relatively new to coding and I've just begun making solo projects, for whatever reason my a tags won't work in my animated sidebar. This is a react project for a restaurant.

#flyoutMenu {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    transition: transform .3s
                cubic-bezier(0, .52, 0, 1);
    overflow: scroll;
    z-index: 5;
  }
   
#flyoutMenu {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: fixed;
    top: 0;
    left: 0;
    transition: transform .3s
                cubic-bezier(0, .52, 0, 1);
    overflow: scroll;
    z-index: 5;
  }
   
  #flyoutMenu.hide {
    transform: translateX(100%);
  }
   
  #flyoutMenu.show {
    transform: translateX(0);
  }
   
  #flyoutMenu h2 a {
    color: rgb(255, 255, 255);
    margin-left: 15px;
    text-decoration: none;
  }
   
  #flyoutMenu h2 a:hover {
    text-decoration: underline;
  }
   
  #flyoutMenu h2 a {
    color: rgb(255, 255, 255);
    margin-left: 15px;
    text-decoration: none;
  }
   
  #flyoutMenu h2 a:hover {
    text-decoration: underline;
  }
  a {
      z-index: 1000;
  }

If I delete these lines the tags suddenly work.

 #flyoutMenu.hide {
    transform: translateX(100%);
  }
   
  #flyoutMenu.show {
    transform: translateX(0);
  }

The a tag inside of the flyoutMenu div doesn't work, while the one just outside of it does.

import React, { Component } from "react";
import "./menu.css";
 
class Menu2 extends Component {
  render() {
    var visibility = "hide";
 
    if (this.props.menuVisibility) {
      visibility = "show";
    }
 
    return (
        <div>
      <div id="flyoutMenu"
           onMouseDown={this.props.handleMouseDown} 
           className={visibility}>
        <h2><a href="#home">Home</a></h2>
        <h2><a href="#pizza">Pizza</a></h2>
        <h2><a href="#burger">Burger</a></h2>
        <h2><a href="#donair">Donair</a></h2>
        <h2><a href="#pasta">Pasta</a></h2>
        <h2><a href="#salads">Salads</a></h2>
        <h2><a href="#extras">Extras</a></h2>
        <h2><a href='#munchies'>Munchies</a></h2>
      </div>
      <h2><a href='#munchies'>Munchies</a></h2>
        </div>
    );
  }
}
 
export default Menu2;

CodePudding user response：

It is because you are not allowed to modify props of a component that way. If you pass "show" as a prop and delete the visibility logic from your component that will also work fine. Please read this for more on two way data binding in react.

CodePudding user response：

You have to use the lifecycle methods to detect the props change. Initially you are setting to visibility as false and it stays at same state for all time. for detecting the changes you should use method called,

static getDerivedStateFromProps

Refer: [https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops][1]

It should solve your issue.

Happy coding

CodePudding user response：

I decided to rebuild it on my own without using a guide and getting all confused. This may not be the elegant solution, but it works! If anyone can show me a much better way to do it feel free :)

import React, { useState } from "react";
import MenuButton from "./button";
import "./menu.css"

export function Nav() {
    const [visible, setVisible] = useState(false)

    function toggleVisible(){
        setVisible(!visible)
    }

    function handleMouseDown(e) {
        toggleVisible();
        e.stopPropagation();
    }

    return(
        <>
            <MenuButton handleMouseDown={handleMouseDown}/>
            <div id="flyoutMenu" handleMouseDown={handleMouseDown} className={visible.toString()}>
                <h2><a href="#home" onClick={handleMouseDown}>Home</a></h2>
                <h2><a href="#pizza" onClick={handleMouseDown}>Pizza</a></h2>
                <h2><a href="#burger" onClick={handleMouseDown}>Burgers</a></h2>
                <h2><a href="#donair" onClick={handleMouseDown}>Donairs</a></h2>
                <h2><a href="#pasta" onClick={handleMouseDown}>Pasta</a></h2>
                <h2><a href="#salads" onClick={handleMouseDown}>Salads</a></h2>
                <h2><a href="#extras" onClick={handleMouseDown}>Extras</a></h2>
                <h2><a href='#munchies' onClick={handleMouseDown}>Munchies</a></h2>
                <h2><a href='#about' onClick={handleMouseDown}>About</a></h2>
                <h2><a href='#location' onClick={handleMouseDown}>Location</a></h2>
            </div>
        </>
    )
}