ReactJS error Syntax error: Unexpected token, expected ; (19:21) (material-ui)

Question

I'm new to ReactJS and I am currently trying to combine a RaisedButton and a Form Dialog from material-ui, however, I'm having trouble when trying to implement the onClick-function. Also a heads up: the code is very long. I know you are supposed to use a "small and verifiable example", however, I do not know which code is relevant and which isn't, since I'm so new to ReactJS.

Script for the button:

const styles = theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  input: {
    display: 'none',
  },
});

function RaisedButtons(props) {

const { classes } = props;

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

handleClick = (e) => {
    this.classes.handleClickOpen();
};
  return (
    <div>
      <Button raised color="primary" className={classes.button} onClick={this.handleClick}>
        Create a new file
      </Button>
    </div>
  );
}
RaisedButtons.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(RaisedButtons);

This is the script for the dialog(meaning the button in my dialog component, that calls the handleClickOpen-function, which does what its name implies).

 <ButtonRaised handleClickOpen={this.handleClickOpen}/>

When trying to run the code, I get the following error (for my RaisedButton script):

Syntax error: Unexpected token, expected ; (19:21)
  17 |  const { classes } = props;
  18 |   
> 19 |   constructor(props) {
     |                      ^
  20 |      super(props);
  21 |      this.handleClick = this.handleClick.bind(this);
  22 |  }

I mean, I understand where the problem is, but I don't know how to fix it. I read several other questions, in which it said that the function probably isn't defined properly and that showed other ways to define them, but nothing helped. I tried removing the constructor method, however, then it told me that handleClick wasn't defined.

When writing the constructor method as

constructor = (props) => {
     super(props);
     this.handleClick = this.handleClick.bind(this);
}

, I got the following error:

Syntax error: 'super' outside of function or class (20:2)

Does anyone know what I'm doing wrong or how to fix that?

klugjo · Accepted Answer · 2017-12-13 08:57:47Z

1

You need to define your component as a class that extends React.Component and not as a pure function if you wish to use methods and constructor:

class RaisedButtons extends React.Component {

 constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
}

handleClick = (e) => {
    this.props.classes.handleClickOpen();
};

render () {
  const { classes } = props;
  return (
    <div>
      <Button raised color="primary" className={classes.button} onClick={this.handleClick}>
        Create a new file
      </Button>
    </div>
  );
}

}

answered Dec 13, 2017 at 8:57

klugjo

21k10 gold badges65 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A.S.J Over a year ago

thank you very much for your reply! I changed const { classes }= props to const { classes } = this.props, since it kept telling me that "props" was undefined, however, now I get the "TypeError:_this.props.classes.handleClickOpen is not a function". Do you know how to solve that ?

A.S.J Over a year ago

(nevermind, removing "classes" from this.props.classes.handleClickOpen() fixed it); Thank you again for your quick reply!

Collectives™ on Stack Overflow

ReactJS error Syntax error: Unexpected token, expected ; (19:21) (material-ui)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related