DigitalDisaster DigitalDisaster - 2 months ago 22
Javascript Question

Arrow function is considered unexpected token in React component using babel

I have this function in one of my react components.

export default class EventTags extends React.Component{
showAll () => {
this.setState({
showAll: true,
showBtn: false
});
}
}


When webpack watch hits it I get an unexpected token error on the arrow function. I have the transform-es2015-arrow-functions plugin enabled but it doesn't seem to change the outcome.

Any ideas on what i'm doing wrong here?

Answer

You need an equals sign when using class property initializers.

export default class EventTags extends React.Component {
  showAll = () => {
    this.setState({
      showAll: true,
      showBtn: false
    });
  };
}
  • Ensure you have the transform-class-properties Babel transform enabled
  • Unlike class methods, class property initializers should be followed by semicolons

Babel's docs on arrow functions in ES6 React components shows longer examples.