Unexpected token - React

Question

I am trying to run a project, however it is displaying an error in the console related to a function I have, the error is as follows:

"63:25  error  Parsing error: Unexpected token, expected (
 function toggleDrawer = (open) => () => {
^
state={"

This is my project:

import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { withStyles } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
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 state = {
    inputs: {},
  };

  function toggleDrawer = (open) => () => {

      state={

        open:false,  
      };
    this.setState({
      open,
    });
  };

  const updateInputValue = (evt) => {
    state.inputs[evt.target.name] = evt.target.value;
    console.log(state.inputs);
  };

  const handleSubmit = (event) => {
    // console.log('handleSubmit', username, password);
    if (!event.target.checkValidity()) {
      console.log({ displayErrors: true });
    }
    event.stopPropagation();
    event.preventDefault();
    return 0;
  };
  return (
    <div className={styles.root}>
      <Grid container spacing={8} alignItems="center" justify="center">
        <Paper className={classes.paper}>
          <AppBar position="static" className={classes.appbar}>
            <Toolbar>
              <IconButton onClick={this.toggleDrawer(true)} className={classes.menuButton} color="contrast" aria-label="Menu">
              <Drawer open={this.state.open} onClose={this.toggleDrawer('open', false)}>
              onClick={this.toggleDrawer('open', false)}
              </Drawer>
                <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} value={state.inputs.username} onChange={evt => updateInputValue(evt)} /><br />
            <TextField id="password" type="password" label="Senha" className={classes.senha} value={state.inputs.password} onChange={evt => updateInputValue(evt)} />
            <AppBar position="static" className={classes.paper1}>
              <Link to="/Orders">
                <Button type="submit" color="contrast">Login</Button>
              </Link>
            </AppBar>
          </form>
        </Paper>
      </Grid>
    </div>
  );
}

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

export default withStyles(styles)(ButtonAppBar);

Answer 1

You are using a stateless functional component ("Stateless Functional Component"), defined thus:

function MeuComponente(props) {
  return (
    {/* Template aqui */}
  );
}

This component doesn’t maintain status. Using things like this.setState doesn’t make sense. Another thing is also that your toggleDrawer method is returning a function. I don’t know if you really wanted to do this.

You must use a class component if you want to keep state, like this:

class MeuComponente extends React.Component {
  render() {
    return (
      {/* Template aqui */}
    );
  }
}

Documentation: https://reactjs.org/docs/state-and-lifecycle.html#Converting-a-Function-to-a-class

Answer 2

Incrementing the @nbkhope response, after you make the necessary modifications to use state, your problem will persist due to syntax error. Arrow functions has shorter syntax.

The correct for your function would be:

toggleDrawer = (open) => {
    this.setState({
        open: open
    });
};

You can also do so:

toggleDrawer(open) {
    this.setState({
        open: open
    });
};

Remember that when doing as the code above, you should make a bind of the method toggleDrawer to use the this within it.

...
constructor(props) {
    super(props);
    this.state = {
        open: false
    };
    this.toggleDrawer = this.toggleDrawer.bind(this);
}
...

Example working on stackblitz.

Recommended reading:

• Arrow functions
• Why it is necessary to use bind when working with ES6 and Reactjs?