I've tried all methods still it doesn't work. I'm trying to build a website that has a menu icon showing up in mobile view such that when I click on it: it toggles!

import React, {useState} from 'react'
import {Link} from 'react-router-dom';
import './Navbar.css';
import { Button } from './Button';


function Navbar() {
    const {click, setClick} = useState(false);
    const {button, setButton} = useState(true);

    const handleClick = () => setClick(!click);
    const closeMobileMenu = () => setClick(false); 

    const showButton = () => {
        if(window.innerWidth <= 960){
            setButton(false);
        } else {
            setButton(true);
        }
    };

window.addEventListener("resize", showButton);

    return (
    
    
            </Link>
            <div className="menu-icon" onClick={handleClick}>
                <i className={click ? "fas fa-times" : "fas fa-bars"} /> 
            </div>
           
      
    )
}

export default Navbar

CodePudding user response：

don't use div to handle onclick instead use input tag of submit or button tag

CodePudding user response：

The useState hook returns a state variable and a handler function to set the state of the variable as an array, and not as an object. Hence, the returned variable and function should be destructed as an array as opposed to object destructuring that you're currently using. Array destructuring can be done using []. E.g, If a function returns an array [1,2,3], it can be destructured and assigned to different variables in one-go using array destructuring, like : const [a,b,c] = [1,2,3]

 const [click, setClick] = useState(false);
 const [button, setButton] = useState(true); //button and setButton in an array and not object.