[Solved] The spread operator(…state) in react throwing error of Unexpected token

In React programming when we are using the spread operator (…state), we may encounter the error saying Unexpected token. For example below piece of code having …state statement and this will throw an error of Unexpected token. Let us see how to solve this issue in the next section.

function amount(state = defaultState, action) {
  debugger;
  switch (action.type) {
    case (ActionTypes.CHANGE_ORIGIN_AMOUNT):
      return {
        ...state,
        originAmount: action.data.newAmount,
      };
      ..........
  }
}

Solution One

The simplest way to solve this error can use object.Assign() method. and, the first parameter is creating a brand new object then merging all of the properties of the state object into that new object so hence it returns that as the new state.

Object.Assign() function example

Solution Two

In the redux documentation or in any other places you might see “….  State” without Object.Assign() method. Using BABEL syntax we can solve this error without Object.Assign().

babel-install-preset-stage-3
Babel-preset example to use spared operator in web-pack

When we are using a web pack, babel pre-set is the easiest way to go because it bundles plugins for you. So let’s add this pre-set to our local web pack setup.  Then add a preset-5 property to our webpack.config file. Finally, restart the application using npm start and the error should not appear again.

Webpack.config.js file settings

Tip: What is spread operator syntax means in ES5 Javascript

This new syntax is called object spread operator, here we are saying return a new object and copy or spared all the properties that exist on to the currentState object onto this new object and then also define a new property and assign the value of an action. For more information, we can refer to MDN Documentation https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Shivaraju M
Shivaraju M

Over 3+ years experience in IT industry, good knowledge in . Net-based Web applications, windows applications, web services, and SPAs. I have played
multiple roles related to technical delivery in multiple domains while working on over 10+ technologies. I am
currently focused on continuous improvement and agile project management.

Leave a Reply