Why is my React MUI component not showing?

I am trying to use the MUI drawer component alongside with React router to display a simple navbar on the left of the page. I am very new to react and am not sure what I am doing wrong as the code compiles fine. The other two pages “Signup” and “Login” are showing up fine. The way the project is structured is I have a separate folder in Components for each page of the website. Then in app.js there is a router which should have a link to each page. I do not have components separated and am trying to have a Drawer as well as other components all in one page titled Dashboard.js

import './App.css';

//Importing Components
import Login from "./Components/Login/Login.js";
import Signup from "./Components/SignUp/Signup.js";
import Dashboard from "./Components/Dashboard/Dashboard.js";

function App() {
  return (
    
    <BrowserRouter>
      <Routes>
        <Route
          path="/login"
          element={
            <div className="App">
              <Login/>
            </div>
              
          }  
        />
         <Route
          path="/dashboard"
          element={
            <div className="App">
              <Dashboard/>
            </div>
              
          }  
        />
         <Route
          path="/Signup"
          element={
            <div className="App">
            
            <Signup/>

            </div>
          }
        />
      </Routes>
    </BrowserRouter>
    
  );

}
export default App;

import {Drawer, Box, Typography, IconButton} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import {useState} from 'react';


const Dashboard = () => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false)
    return (
        <>
        <IconButton 
        size = 'large' 
        edge = 'start' 
        color = 'inherit' 
        aria-label = 'logo' 
        onCLick = {() => setIsDrawerOpen(true)}
        >
        <MenuIcon/>
        </IconButton>
       
        <Drawer 
        anchor = 'left' 
        open = {isDrawerOpen} 
        onClose={() => setIsDrawerOpen(false)}>
           
            <Box 
            p={2} 
            width = '250px' 
            textAlign = 'center' 
            role= 'presentation'
            >
            
            <Typography 
            variant = 'h6' 
            component ='div'>

            </Typography>
            </Box>
        </Drawer>
        </>
    )


}
export default Dashboard;

Answer

Change your code to this

 const handleDrawerOpen = () => {
    setIsDrawerOpen(true);
  };


  <IconButton
        size="large"
        edge="start"
        color="inherit"
        aria-label="logo"
        onClick={handleDrawerOpen}
      >
        <MenuIcon />
      </IconButton>

I created a codesandbox from your code and onClick works there

Advertisement

Answer