How to update properties of an array nested inside objects in ReactJS

Question

I have simplified my large data set as follows,

let state = {
    someProp: {
        someOtherProp: [
            {
                key1: "value1",
                key2: "value2"
            },
            {
                key1: "value3",
                key2: "value4"
            }
        ]
    }
}

I want to update the key1 prop of 0th index of someOtherProp, say to "value5".

Tried the following

let newState = {
    ...state, 
        someProp: 
            {...state.someProp, 
                someOtherProp: 
                    {...state.someProp.someOtherProp, 
                        [0]: 
                           {...state.someProp.someOtherProp[0], 
                               key1 : "value5"
                           }
                    }
            }
}

document.write(JSON.stringify(newState));

Output :

    {
       "someProp": {
          "someOtherProp": {
               "0": {
                      "key1":"value5",
                      "key2":"value2"
                    },
               "1": {
                       "key1":"value3",
                       "key2":"value4"
                    }
           }
        }
      }

But it will convert someOtherProp from array of objects to just nested array. I know that the problem is with "[0] : ..." statement. Not sure how to write it. Please help. New to JS and ReactJS.

Are you using class components or functional components with hooks? — T.J. Crowder
– T.J. Crowder, Commented Mar 6, 2020 at 15:14
Class component, but the above mentioned logic I am coding inside Reducer method. — Mohammed Shirhaan
– Mohammed Shirhaan, Commented Mar 6, 2020 at 15:14

T.J. Crowder · Accepted Answer · 2020-03-06 15:17:22Z

You're creating an object, not an array, for someOtherProp:

someOtherProp: 
    {...state.someProp.someOtherProp, 
        [0]: 
           {...state.someProp.someOtherProp[0], 
               key1 : "value5"
           }
    }

Create an array instead. I'd do it before the big object literal:

const someOtherProp = [...state.someProp.someOtherProp];
someOtherProp[0] = {
    ...state.someProp.someOtherProp[0]
    key1 : "value5"
};

then:

const someOtherProp = [...state.someProp.someOtherProp];
someOtherProp[0] = {
    ...state.someProp.someOtherProp[0]
    key1 : "value5"
};
let newState = {
    ...state, 
        someProp: 
            {...state.someProp,  someOtherProp}
// −−−−−−−−−−−−−−−−−−−−−−−−−−−−−−^^^^^^^^^^^^^
}

But if you want, you can do it inline instead:

someOtherProp: 
    [
// −^   {...state.someProp.someOtherProp[0],      // Note this is first
            key1 : "value5"
        },
        ...state.someProp.someOtherProp.slice(1)  // Note skipping the first
    ]
// −^

Rob Brander · Accepted Answer · 2020-03-06 15:24:23Z

2

The problem you are having is that you're using an object literal instead of an array literal when you define the new someOtherProp.

Try this:

let newState = {
    ...state, 
        someProp: 
            {...state.someProp, 
                someOtherProp: 
                    [
                       // create a new first element, using the existing, and overridding key1
                       {...state.someProp.someOtherProp[0], 
                               key1 : "value5"
                       },
                       // append all other someOtherProps except for the first one
                       ...state.someProp.someOtherProp.slice(1)
                    ]
            }
}

edited Mar 6, 2020 at 15:24

answered Mar 6, 2020 at 15:16

Rob Brander

3,7831 gold badge22 silver badges33 bronze badges

Comments

Alan Darmasaputra · Accepted Answer · 2020-03-06 15:23:34Z

1

I don't think you need to force it into one statement.

JS's syntax is not that flexible to do this.

Forcing it too far may hurt cpu-time. (e.g. when using filter to copy the array to a new one)

const newSomeOtherProp = state.someProp.someOtherProp.slice();
newSomeOtherProp[0] = {...newSomeOtherProp[0], key1: "value5"};

const newState = { 
  ...state,
  someProps: { 
    ...state.someProp,
    someOtherProp: newSomeOtherProp
  }
};

answered Mar 6, 2020 at 15:23

Alan Darmasaputra

4682 silver badges6 bronze badges

Comments

Alvaro · Accepted Answer · 2020-03-06 15:32:27Z

0

someOtherProp is an array but it is being treated as an object. This a generic approach:

const index_to_modify = 0;
const key_to_modify = "key1";
const new_value = "value5";

const newState = {
    ...state,
    someProp: {
        ...state.someProp,
        someOtherProp: state.someProp.someOtherProp.map((item, index) => {
            if (index !== index_to_modify) {
                return item;
            }

            return {
                ...item,
                [key_to_modify]: new_value
            };
        })
    }
};

But as you can see this gets difficult to read and modify. When dealing with nested data you might want to separate concerns for each part of the data. Also there are tools that can be handy such as immer.

edited Mar 6, 2020 at 15:32

answered Mar 6, 2020 at 15:19

Alvaro

9,81210 gold badges53 silver badges77 bronze badges

Collectives™ on Stack Overflow

How to update properties of an array nested inside objects in ReactJS

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related