CODEWITHSUNDEEP
javascriptreactjsecmascript-6babeljs
andrey.shedko
andrey.shedko

Reputation: 3238

ES6 way to define state in React

I'd like to use state this way:

class Checkout extends Component {
    state = {
        ingredients: null,
        totalPrice: 0
    };

But I'm getting error saying Unexpected token =, I know this can be fixed with babel-plugin-transform-class-properties, unfortunately it's not working in my case.
Here is my package.json

"babel": {
    "presets": [
      "env",
      "react-app"
    ],
    "plugins": ["transform-class-properties"]
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "devDependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.1.0"
  }

Any idea what else can be wrong here?

Upvotes: 1

Views: 241

Answers (3)

andrey.shedko
andrey.shedko

Reputation: 3238

Problem was related to Eslint. When I installed babel-eslint and add parcer option to .eslintrc, this error gone.

"parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],

Upvotes: 1

Revinand
Revinand

Reputation: 540

Try babel-preset-stage-2. It includes transform-class-properties and other stuff. And add it to your babel presets array

"babel": {
  "presets": [
    "env",
    "react-app",
    "stage-2"
  ]
}

This will allow you to define state ES6 way.

Also the recommended way to enable babel presets is via .babelrc file. It should be placed in the project root.

Upvotes: 0

Code-Apprentice
Code-Apprentice

Reputation: 83527

The typical way to do what you want is to set this.state in a constructor:

class Checkout extends Component {
    constructor() {
        this.state = {
            // Whatever keys and values you want here
        }
    }
}

Upvotes: 0

Related Questions