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

JavascriptReactjs

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

You probably need to copy the objects:

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

Solution 2 - Javascript

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})
)

Solution 3 - Javascript

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

Solution 4 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMendesView Question on Stackoverflow
Solution 1 - JavascriptJonas WilmsView Answer on Stackoverflow
Solution 2 - JavascriptlilezekView Answer on Stackoverflow
Solution 3 - JavascriptArul Ganapathy MView Answer on Stackoverflow
Solution 4 - JavascriptOmarView Answer on Stackoverflow