Getting Destructuring error with Rest operator?

Question

I assume this must be destructuring using a rest statement? what exactly is this doing? The problem is, I get an error in WebStorm:

const cars = {...this.state.cars}

Error: Unexpected token

it's referring to the first {

Here's the react component method:

addCar(car){
    const cars = {...this.state.cars};
    const timestamp = Date.now();
    cars[`car-${timestamp}`] = car;
    this.setState({ cars })
  }

I do have babel setup and working because everything else seems to work fine such as import, etc.

[`...` is not an operator.](http://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) — Felix Kling, Jan 29 '17 at 20:47

cartant · Accepted Answer · 2017-01-29T21:02:50.113

3

It's the spread properties syntax and it's creating a shallow copy of this.state.cars. That means that this line:

cars[`car-${timestamp}`] = car;

doesn't result in an additional key being added to this.state.cars. That is, it's being used specifically so that this.state.cars is not mutated.

For spread properties to be included in your Babel configuration, you'd need to be using the babel-plugin-syntax-object-rest-spread and babel-plugin-transform-object-rest-spread plugins - which are included in the stage-2 preset.

edited Jan 29 '17 at 21:02

answered Jan 29 '17 at 20:09

cartant

57,105
17
163
197

1

[`...` is not an operator.](http://stackoverflow.com/questions/37151966/what-is-spreadelement-in-ecmascript-documentation-is-it-the-same-as-spread-oper/37152508#37152508) – Felix Kling Jan 29 '17 at 20:47

Getting Destructuring error with Rest operator?

1 Answers1