Destructuring and reordering Array with ES6 and React

Question

I wanted to use a destructuring solution to reorder my array within my React container which it should be pretty straight forward. Given an array a1 = ['hello', 'hi', 'hola']

componentDidMount() {
  const { a1 } = this.props
  this.a2 = []
  [a2[2], a2[0], a2[1]] = a1  --> this line give an error!!
  console.log('new ordered array', a2) // ['hola', 'hello', 'hi'] --> this print properly my new array
}

If I try to console log or use it in render I got undefined The error I got at that line is:

Uncaught (in promise) TypeError: Cannot set property '#<Object>' of undefined

I really don't get it why I can print the value correctly in the console.log but when I try to actually use it in the code it doesn't work. It's maybe something React cycle related? I also tried to use it within my state but got the same error.

Have a look at the line with the error, you have a dot (.) where a comma should be — user3151902
– user3151902, Commented Aug 17, 2017 at 10:25

dfsq · Accepted Answer · 2017-08-17 10:42:01Z

5

This line gives you an error because this is one of those rare cases when automatic semicolon insertion lets you down. Never start new line with ( or [], otherwise interpreter considers it as continuation of the previous line and treats [ or ( as property access operation or function invocation.

This will work:

this.a2 = [];
[a2[2], a2[0], a2[1]] = a1

Or this:

this.a2 = []
;[a2[2], a2[0], a2[1]] = a1

answered Aug 17, 2017 at 10:42

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Giorgia Sambrotta Over a year ago

that's exactly what it was happening! Problem is" my lint won't allow me to add semicolon -.- frontend development, so much fun :) I anyway already solved in another way but at least now i know, Thanks!

Saravanan I · Accepted Answer · 2017-08-17 10:25:29Z

1

There is an . instead of , in this line [a2[2], a2[0]. a2[1]] = a1 --> this line give an error!!

answered Aug 17, 2017 at 10:25

Saravanan I

1,2296 silver badges9 bronze badges

1 Comment

Giorgia Sambrotta Over a year ago

You are right but i just mistype the question here, in my actual code, there is a comma

Collectives™ on Stack Overflow

Destructuring and reordering Array with ES6 and React

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related