use of Drawer in the React/material-ui

Asked

Viewed 215 times

0

Good night. I’m a beginner in React and I’m trying to apply a Drawer to my project, but when running it on the localhost Drawer isn’t working and I’m getting the following errors:

'handleToggle' is Assigned a value but Never used

'handleClose' is Assigned a value but Never used

 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 {List, ListItem} from 'material-ui/List';
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';

    function ButtonAppBar(props) {
      const { classes } = props;
      this.state = {open: false};
      const handleToggle = () => this.setState({open: !this.state.open});
      const handleClose = () => this.setState({open: false});

      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}>
            <AppBar position="static" className={classes.appbar}>
              <Drawer docked={false} open={this.state.open}  onRequestChange={(open) => this.setState({open}) >
              </Drawer>
              <Toolbar>
              <IconButton onClick={this.handleToggle} className={classes.menuButton} color="contrast" aria-label="Menu">
                <MenuIcon />
              </IconButton>
              </Toolbar>
          </AppBar>
              <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} />
                <AppBar position="static" className={classes.paper1}>
                  <Button type="submit" color="contrast">Login</Button>
                </AppBar>
              </form>
            </Paper>
          </Grid>
        </div>
      );
    }

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

    export default withStyles(styles)(ButtonAppBar);
react material-design

1 answer

0

It’s not a mistake, it’s just saying that you declared a constant called handleToggle and another call handleClose, but you haven’t used it anywhere.

Browser other questions tagged react material-design

You are not signed in. Login or sign up in order to post.