Object is not extensible error when creating new attribute for array of objects

Question

I have a function that needs to extend a javascript array, including a new attribute called selected:

export const initSelect = (data) => {

    let newData = data.concat();
    newData.map((item) => {
        item.selected = false;
    })

    return newData;
}

data is a ReactJS state value (comes from this.state.data when calling the function), but this didn't seem to be a problem as newData is a new copy of data array...

I'm getting the following error:

TypeError: Cannot add property selected, object is not extensible

In order to really understand this error this here developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… might help. — Elmar Zander
– Elmar Zander, Commented Aug 21, 2020 at 9:18

Jonas Wilms · Accepted Answer · 2017-08-21 14:10:07Z

142

You probably need to copy the objects:

export const initSelect = (data) => {
 return data.map((item) => ({
     ...item,
     selected: false       
 }));
}

edited Aug 21, 2017 at 14:10

answered Aug 21, 2017 at 13:55

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

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

3 Comments

lilezek Over a year ago

@Jonasw the op is misusing concat and map. I think your solution should not be misusing them also.

Mendes Over a year ago

Will the returned object a copy of data ? I will use the return to set the ReactJS object state....

Harrish Selvarajah Over a year ago

Works!!!! I did not get this error locally but in the deployed version of my app, anyone here knows why this is happening ?

lilezek · Accepted Answer · 2018-01-17 15:38:24Z

52

You can not extend item with selected property, and your array is just a shallow copy.

If you want to be able to extend, you will have to do a deep copy of your array. It may be enough with:

let newData = data.map((item) => 
    Object.assign({}, item, {selected:false})
)

edited Jan 17, 2018 at 15:38

answered Aug 21, 2017 at 13:56

lilezek

7,4552 gold badges30 silver badges47 bronze badges

3 Comments

Rocío García Luque Over a year ago

I see the same error with Object.assign approach. I manage to solve it using @Jonas anwer.

lilezek Over a year ago

Then probably you are doing something wrong @RocíoGarcíaLuque, as Jonas' solution and mine are equivalent according to my understandings of stackoverflow.com/a/50558264/2832398

Rocío García Luque Over a year ago

You are totally right. I cannot remember the situation, but probably yes, I was doing something wrong. Your solution is perfectly valid :+1:

Neil Gaetano Lindberg · Accepted Answer · 2024-12-06 20:15:53Z

23

data = JSON.parse(JSON.stringify(data));

As of 2024 use: structuredClone(value, options)

https://developer.mozilla.org/en-US/docs/Web/API/Window/structuredClone

edited Dec 6, 2024 at 20:15

Neil Gaetano Lindberg

3,0551 gold badge36 silver badges28 bronze badges

answered Jun 1, 2020 at 11:42

Arul Ganapathy M

2752 silver badges3 bronze badges

3 Comments

Esben Damgaard Over a year ago

That seems like some unnecessary "stringifycation". There could also be objects in data that could not be stringified and therefor destroy the original data.

LordRampantHump Over a year ago

for my "unpushable" array, this was perfect

Ivan Yulin Over a year ago

you can rely on lodash.deepClone(data) to avoid nested data loss

Pang · Accepted Answer · 2022-12-30 07:54:05Z

14

const newObj = Object.assign({selected: false}, data);

edited Dec 30, 2022 at 7:54

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Apr 30, 2018 at 22:18

Omar

3,0903 gold badges42 silver badges74 bronze badges

2 Comments

Derek Brown Over a year ago

While this code snippet may solve the question, including an explanation really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.

lilezek Over a year ago

Please, keep in mind that this code afaik is not equivalent. If data already contains selected: true for example, the new object will end up with selected: true.

Collectives™ on Stack Overflow

Object is not extensible error when creating new attribute for array of objects

4 Answers 4

3 Comments

3 Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related