Redux: Reduced - How to avoid object is not extensible error during the recursion on nested array?

Question

I have the following array of objects with nested objects:

[
      {
        "name": "ONE",
        "properties": [
          {
             "name": "XXX"
          },
          {
             "name": "YY"
          }
        ]
      },
      {
        "name": "TWO",
        "properties": []
      }
    ]

And I am trying to add the attribute to each object recursively using map in Reducer Function. Where I am getting following exception:

TypeError: Cannot add property isChecked, object is not extensible

projectData.myArr.map((item, index) => {   item.isChecked = false;   item.properties.map((value, index1) => {     value.isChecked = false;   }) });

I tried to use Object.assign() as it was discussed here: Object is not extensible error when creating new attribute for array of objects

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

But this way allows me to add attributes for only top-level objects and not to inner objects.

How could I solve with nested objects related to the Redux Pattern?

what is 'projectData.myArr'? does myArr contains the array ? — vaira
– vaira, Commented Dec 9, 2021 at 17:09

jsejcksn · Accepted Answer · 2021-12-09 17:12:33Z

3

Use nested spread syntax to create new objects at each level of desired mutation:

projectData.myArr.map((item, itemIndex) => ({
  ...item,
  isChecked: false,
  properties: item.properties.map((value, valueIndex) => ({
    ...value,
    isChecked: false,
  }));
}));

answered Dec 9, 2021 at 17:12

jsejcksn

34.6k5 gold badges55 silver badges79 bronze badges

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

Comments

Venkataramanan · Accepted Answer · 2023-03-29 08:43:34Z

0

One can also try using the Native StructuredClone or lodash cloneDeep(for node version before V17.2.0)

structuredClone(projectData).myArr.map((item, index) => {   item.isChecked = false;   item.properties.map((value, index1) => {     value.isChecked = false;   }) });

This will create a new clone thus none of the property in redux will be modified allowing one to freely work with the code.

answered Mar 29, 2023 at 8:43

Venkataramanan

712 silver badges6 bronze badges

Collectives™ on Stack Overflow

Redux: Reduced - How to avoid object is not extensible error during the recursion on nested array?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related