React Hamburger Menu unfunctional

Question

I need help. My responsive hamburger menu is not working when clicked on. It is supposed to show the navigation links but it is not doing so, its not even switching icons when clicked on. When I remove this line "{open && NavLinks}" and just leave it as "NavLinks" the navigation links show up but the hamburger menu is still unfunctional. How can I fix this? Mobile Navigation Image

import React, {useState} from 'react';
import NavLinks from './NavLinks';
import  './nav.css';
import {BiMenuAltRight} from 'react-icons/bi';
import {IoMdClose} from 'react-icons/io';

function MobileNavigation() {

    const [open, setOpen] = useState(false);

    const hamburgerIcon =  setOpen(!true)}/>;

    const closeIcon =  setOpen(!true)}/>

    return (
        
            {open ? closeIcon : hamburgerIcon}
            {open && }
        
    );
}

export default MobileNavigation;

.nav-bar {
  height: 60px;
  width: 100%;
  top: 0;
  position: sticky;
  background-color: black;
  z-index: 1000;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: flex;
}

.nav-logo h1 {
  font-size: 23px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  font-family: "Earth-Obiter";
  background: linear-gradient(
    to right,
    #13c2e9,
    #3ab6ec,
    #5ca8e8,
    #799adf,
    #908bd0,
    #a480c7,
    #b873b9,
    #c866a6,
    #de5890,
    #ee4c73,
    #f4484f,
    #f05123
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}
.nav-logo img {
  object-fit: contain;
  width: auto;
  height: 50px;
  padding-left: 30px;
}

.nav-items {
  list-style-type: none;
  display: flex;
  flex-direction: row;
}

.nav-items li {
  padding: 0 30px;
}

.nav-items li a {
  align-items: center;
  color: white;
}

.li-quote a {
  background-color: rgb(0, 209, 157);
  border-radius: 20px;
  padding: 7px 15px;
}

.li-quote a:hover {
  background-color: #f05123;
  transition: ease-in-out 0.5s;
}

.nav-li a:hover {
  background-color: white;
  color: black;
  padding: 7px 14px;
  border-radius: 20px;
  transition: ease-in 0.3s;
}

.MobileNavigation {
  display: none;
}

/* Media Queries */

@media only screen and (max-width: 768px) {
  .Navigation {
    display: none;
  }
  .MobileNavigation {
    display: grid;
    flex-direction: column;
    background: rgb(0, 30, 60);
    align-items: center;
  }
  .Hamburger {
    position: absolute;
    right: 5%;
    cursor: pointer;
  }
}

user_16039642 · Answer

const hamburgerIcon =  setOpen(true)}/>;

const closeIcon =  setOpen(!true)}/>

Admin · Answer

const [open, setOpen] = useState(false);

// This handler switches the bool open state, whatever value it currently has
const handleToggle = () => {
  setOpen(!open)
}

// Replace this...
const hamburgerIcon =  setOpen(!true)}/>; // You are setting the state to false
const closeIcon =  setOpen(!true)}/> // You are setting the state to false

// ...with this
const hamburgerIcon = ;
const closeIcon =

React Hamburger Menu unfunctional

2 Answers