Arrow function is considered unexpected token in React component using babel [closed]

Question

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 1

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.