Material UI Drawer not Opening even if state is True

Question

I am building a WebApp with React and Material UI. I have followed few tutorials for the Drawer and documentation and I don't seem to understand how it works.

Even if my Drawer state for Opening is True it still does not Open even on Initialization.

I don't seem to find where I'm Wrong.

That's the Code for the Header:

import React from 'react';
import clsx from 'clsx';
import {List, ListItem, ListItemIcon, ListItemText} from '@material-ui/core'

import { ContactsIcon } from '@material-ui/icons/Contacts'
import { HomeIcon } from '@material-ui/icons/Home'
import { GroupIcon } from '@material-ui/icons/Group'
import { makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import Button from '@material-ui/core/Button';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Drawer from '@material-ui/core/Drawer'

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
  },
  menuButton: {
    marginRight: theme.spacing(2),
  },
  title: {
    flexGrow: 1,
  },
  list: {
      width: 250,
  },
  fullList: {
      width: 'auto',
  },
}));


function indexToIcon(index) {
    if(index === 0){
        return <HomeIcon/>
    }
    else if(index === 1){
        return <GroupIcon/>
    }
    else if(index === 2){
        return <ContactsIcon/>
    }
}

export default function ButtonAppBar() {
    const classes = useStyles();

    const [state, setState] = React.useState({
        left:false,
    });

    const toggleDrawer = (open) => (event) => {
        if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')){
            return;
        }
        setState({ ...state, left: open });
    };

  const list = left => (
      <div>
          <List>
              {['Start', 'Über uns', 'Kontakt'].map((text, index) => (
                  <ListItem button key={text}>
                      <ListItemIcon>{indexToIcon(index)} </ListItemIcon>
                      <ListItemText primary={text} />
                  </ListItem>
              ))}
          </List>
      </div>
  );


  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton onClick={toggleDrawer(true)} edge="start" className={classes.menuButton} color="inherit" aria-label="menu">
            <MenuIcon></MenuIcon>
          </IconButton>
          <Drawer open={true} onClose={toggleDrawer(false)}>
            {list}
          </Drawer>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <Button color="inherit">Login</Button>
        </Toolbar>
      </AppBar>
    </div>
  )};

That's my app.js:

import React from 'react';
import './App.css';
import { Button, Typography, Grid } from '@material-ui/core';
import Header from "./Header"

export default function App() {
  return(
    <div className="App">
      <Grid direction="column">

        <Header></Header>
        <Grid item xs={2}></Grid>
        <Grid item xs={8}>
        a Scur   a Scur   a Scur   a Scur   a Scur   a Scur   a Scur   a Scur   a Scur
        </Grid>
        <Grid item xs={2}></Grid>



      </Grid>
    </div>
  );
  }

and my dependencies on package.json:

    {
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@material-ui/core": "^4.9.14",
        "@material-ui/icons": "^4.9.1",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

Answer 1

It seems your Drawer children content is not rendered, because you don't invoke list function. That's why you don't see it. Try this:

<Drawer open={state.left} onClose={toggleDrawer(false)}>
  {list()}
</Drawer>

Also keep in mind that it's not recommended to define functions inside react components as it may have performance impact: these functions are recreated on every render cycle. You should rather memoize functions with useCallback hook, for example:

const renderList = useCallback((left) => (
  <div>
    <List>
      {['Start', 'Über uns', 'Kontakt'].map((text, index) => (
        <ListItem button key={text}>
          <ListItemIcon>{indexToIcon(index)}</ListItemIcon>
          <ListItemText primary={text} />
        </ListItem>
      ))}
    </List>
  </div>
), []);

Answer 2

There is a wrong syntax:

<Drawer>, open={true} onClose={toggleDrawer(false)}>

It must be

<Drawer open={true} onClose={toggleDrawer(false)} >