CODEWITHSUNDEEP
reactjs
Anietie Godswill
Anietie Godswill

Reputation: 53

Can't close the Hamburger Menu in ReactJS

I'm trying to close my Hamburger Menu but it did not close, First I initialize and set useState to false,

const [burgerStatus,setBurgerStatus] = useState(false);

And then I created a styled component {BurgerNav} and then pass a parameter show and assigned {burgerStatus} to it.

<BurgerNav show={burgerStatus}>

Then in CSS, I used to transform

transform: ${props => props.show ? 'translateX(0)': 'translateX(100%)'};

Then, in the Hamburger menu, I first create an onClick handler and setBurgerStatus to true, and then I try to click on the menu and it opens successfully.

<CustomMenu onClick={() => setBurgerStatus(true)}></CustomMenu>

But then I create another onClick handler to close the menu but it can't work

<CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

FULL CODE

    const [burgerStatus,setBurgerStatus] = useState(false);
    return (
        <Container>
            <a>
                <img src="/images/logo.svg" alt=""/> 
            </a>
             <Menu>
                <a href="#"> Model S</a> 
                <a href="#"> Model 3</a>
                <a href="#"> Model X</a>
                <a href="#"> Model Y</a> 
             </Menu>
             <RightMenu>
                <a href="#"> Shop</a> 
                <a href="#"> Tesla Account</a> 
                <CustomMenu onClick={() => setBurgerStatus(true)}>
                </CustomMenu>
             </RightMenu>
             <BurgerNav show={burgerStatus}>
                 <CloseWrapper> 
                    <CustomClose onclick={() => setBurgerStatus(false)}>
                    </CustomClose>
                 </CloseWrapper>
                 <li><a href="#">Existing Inventory</a></li>
                 <li><a href="#">Used Inventory</a></li>
                 <li><a href="#">Trade-in</a></li>
                 <li><a href="#">Cyber truck</a></li>
                 <li><a href="#">Roadster</a></li>
             </BurgerNav>
        </Container>

Upvotes: 0

Views: 389

Answers (2)

JGazca
JGazca

Reputation: 1

I suggest also editing your settings.json in your code editor.

By adding -

"emmet.includeLanguages": {
    "javascriptreact"
  }

This helps you with autocompleting your JSX and hopefully help with those small errors in the future. Or also adding an extension that adds syntax highlighting, really helps with seeing everything a bit easier.

Upvotes: 0

Harish Soni
Harish Soni

Reputation: 1896

i see there is a syntax error in your code

<CloseWrapper> 
     <CustomClose onclick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

Change here onclick to onClick

<CloseWrapper> 
     <CustomClose onClick={() => setBurgerStatus(false)}>
     </CustomClose>
</CloseWrapper>

It must work then, please give some support if my answer helps and accept it as the answer.

Upvotes: 1

Related Questions