The sidebar is automatically rendered even i have functionality to implement with click on pizza icon

Main.js component , in this component the functionality of useState Hook for toggling the sidebar is implemented

import React, { useState } from 'react';  
import { Navbar } from '../NavBar/Navbar';  
import { SideBar } from '../SideBar/sidebar';  
import { MainContainer,MainContent,MainItem,MainH1,MainP1,MainButton } from './MainElements';

export const Main = () => {

    const [isOpen, setIsOpen] = useState(false);

  const toggle = () => {
    setIsOpen(!isOpen);
  };

    return (
        <MainContainer>
            <Navbar toggle={toggle}/>
            <SideBar isOpen={isOpen} toggle={toggle} />
            <MainContent>
                <MainItem>
                    <MainH1>
                        Greatest Pizza Ever
                    </MainH1>
                    <MainP1>
                        Ready as early in the 5 Minutes
                    </MainP1>
                    <MainButton>Submit</MainButton>
                </MainItem>
            </MainContent>
        </MainContainer>
        
    )
}

Sidebar.js component which is automatically rendered on the screen

import { SidebarContainer,Icon,CloseIcon,SidebarMenu,SidebarLink,SidebarBtn,SidebarRoute } from "./sidebar.element";    
export const SideBar = ({isOpen,toggle})=> {  
    return(

        <SidebarContainer isOpen={isOpen} onClick={toggle}>
            <Icon onClick={toggle}>
            <CloseIcon/>
             </Icon>    
                <SidebarMenu>
                    <SidebarLink to="/">Pizzas</SidebarLink>
                    <SidebarLink to="/">Desserts</SidebarLink>
                    <SidebarLink to="/"> Full Menu</SidebarLink>
                </SidebarMenu>
                <SidebarBtn>
                    <SidebarRoute to="/">Order Now</SidebarRoute>
                </SidebarBtn>
            
        </SidebarContainer>
    );
}

Navbar.js component which holds the icon and props toggle

import React from 'react';
import { Nav, NavLink, NavIcon, PizzaIcon} from './NavbarElements'; 

export const Navbar = ({toggle}) => {  
    return (
     
            <Nav>
                <NavLink to='/'>
                    Muncheese
                </NavLink>
                <NavIcon onClick={toggle}>
                    <p>Menu</p>
                    <PizzaIcon/>
                </NavIcon>
            </Nav>
       
    )
}

CodePudding user response：

Not so sure what your isOpen do. Did you declare that part inside SidebarContainer?

Try changing it to render conditionally like this

{ isOpen ? <SideBar toggle={toggle}/> : null }

Also its worth pointing out that within your sidebar, you've already set an onClick event listener for the whole sidebar component. The onClick within your Icon is not necessary unless you want a specific part of this component to perform the toggle function then you need to remove the onClick in SidebarContainer.

<SidebarContainer isOpen={isOpen} onClick={toggle}>