Question

35

Arrow function is considered unexpected token in React component using babel

rated 0 times [ 37] [ 2] / answers: 1 / hits: 22186 / 8 Years ago, wed, september 14, 2016, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristinsonjab

Add To Favorites

Follow

Total Points: 364

Total Questions: 98

Total Answers: 98

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

kristinsonjab questions

1 is it possible to install canvas with M1 chip

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React-router v6 Route composition. Is it possible to render a custom Route?

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Next.js router locale issue

Fri, Jan 22, 21, 00:00, 3 Years ago

1 Sort array of objects by multiple properties of string type

Wed, Sep 2, 20, 00:00, 4 Years ago

1 Can't scroll down screen in react JS

Fri, Aug 14, 20, 00:00, 4 Years ago

View All

answered 8 Years ago malaysias · Accepted 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.