ReactJS - Unexpected token '.' error

Question

I am starting with my react project on VS2013 working together with ASP.NET MVC. I have configured webpack and configuration seemed working well until I tried to implement the following class.

class Hello extends React.Component { this.state = { visible: true } render() { /** Method definition **/ ... }

I am getting an error Unexpected Token at '.' at 'this.state'. I have already check es2015 is set as babel preset. If I remove state and toggleVisibility assignments, webpack bundles OK.

Any idea what else can I try?

thangngoc89 · Accepted Answer · 2017-07-08 16:21:41Z

It's a class so the correct syntax should be

class Hello extends React.Component { state = { visible: true } render() { /** Method definition **/ ... }

Also, the recommended way of defining initial state should be

class Hello extends React.Component { constructor(props) { super(props) this.state = { visible: true } } render() { /** Method definition **/ ... }

Mr. Alien · Accepted Answer · 2017-07-08 16:30:04Z

You should define this.state in a constructor like

constructor(props) { super(props); this.state = { visible: true }; }

Hence, your code should be

class Hello extends React.Component { constructor(props) { super(props); this.state = { visible: true }; } render() {} }

From React docs:

The constructor is the right place to initialize state. If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.

Collectives™ on Stack Overflow

ReactJS - Unexpected token '.' error

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related