Drawer not opening

Question

Good evening. I have a problem that I think is simple to solve but I could not get it because I was just a beginner in react. The problem is that the drawer that I put in my appbar just does not open, and there is no error on the console about it, so I would like the help of you guys. PS: sorry for the bad English, I'm Brazilian.

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';
import AppBar from 'material-ui/AppBar';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import Toolbar from 'material-ui/Toolbar';
import MenuIcon from 'material-ui-icons/Menu';
import TextField from 'material-ui/TextField';
import Paper from 'material-ui/Paper';
import Grid from 'material-ui/Grid';
import '../assets/scss/main.scss';
import img from '../assets/images/react.png';

const styles = theme => ({
  root: {
    width: '100%',
  },
  flex: {
    flex: 1,
  },
  menuButton: {
    marginLeft: -12,
    marginRight: 20,
  },
  inputProps: {
    step: 300,
  },
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
  paper: {
    padding: 50,
    textAlign: 'center',
    border: '5px solid black',
    width: '100%',
  },
  paper1: {
    backgroundColor: 'red',
    marginTop: '13%',
  },
  img: {
    width: '45%',
  },
  appbar: {
    marginLeft: '-20.20%',
    marginTop: '-20%',
    width: '139.99%',
  },
});


function ButtonAppBar(props) {
  const { classes } = props;
  const handleSubmit = (event) => {
    event.preventDefault();
    const data = {
      email: document.getElementById('email').value,
      password: document.getElementById('password').value,
    };
    console.log(data);
  };
  return (

    <div className={styles.root}>
      <Grid container spacing={8} alignItems="center" justify="center">
        <Paper className={classes.paper}>
        <div>
        <AppBar position="static" className={classes.appbar}>
        <Drawer />
          <Toolbar>
          <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
            <MenuIcon />
          </IconButton>
          </Toolbar>
      </AppBar>
      </div>
          <img src={img} alt="React" className={classes.img} /><br />
          <form onSubmit={handleSubmit} noValidate>
            <TextField id="email" type="email" label="Usuário" className={classes.user} /><br />
            <TextField id="password" type="password" label="Senha" className={classes.senha} />
            <div>
            <AppBar position="static" className={classes.paper1} >
              <Button type="submit" color="contrast">Login</Button>
            </AppBar>
            </div>
          </form>
        </Paper>
      </Grid>
    </div>
  );
}

ButtonAppBar.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(ButtonAppBar);

Answer 1

Take a look at the Drawer demos in the documentation. You’ll see that the Drawer uses an open prop to specify whether it is open or not. In the demos, this is controlled my state.

The way this is usually handled is by using a button, like IconButton, in the AppBar with an onClick handler that issues a state change, resulting in a re-render.

The demos should help you reconfigure your app and get rolling. The most straightforward example of using component state to open and close the Drawer is the mobile portion of the Responsive Drawer demo.

It initializes state to false and renders the open prop using this.state.mobileOpen. The AppBar has an IconButton with handleDrawerToggle as it’s onClick handler, which changes state, causing the component to re-render.