how to update inner array of objects in react use state

Question

 {moduleCode: ‘xxx, moduleName: ‘xxxx’, subModules: Array(4), features: Array(2)}

when I tried the below code is working

setNewSelectedModules(prev => [
    ...prev,
    { moduleCode: e.target.id, moduleName: e.target.value }
]);

I'm not able to update the inner array But pls guide me on how to update subModules, which is an inner array of objects ->

suModules:[{moduleCode: ‘xxx, moduleName: ‘xxxx’}]

What is the previous state? What should the new state look like? — Ramesh Reddy
– Ramesh Reddy, Commented Jan 28, 2022 at 10:31
Please try this: setNewSelectedModules(prev => ({...prev, subModules: [...prev.subModules, {moduleCode: 'someCode', moduleName: 'someName'}]}));. The assumption is that the useState is like so: const [newSelectedModules, setNewSelectedModules] = useState({});. In other words, newSelectedModules is an object which has the prop subModules. — jsN00b
– jsN00b, Commented Jan 28, 2022 at 11:07
Hi Ramesh, its an empty state and I recreate the array of objects after the user selects modules, submodules, features etc... (the original array is having the entire modules, sub modules etc...) — Paul
– Paul, Commented Jan 28, 2022 at 13:26

Amila Senadheera · Accepted Answer · 2022-01-28 10:36:09Z

1

You can achieve it using map. Update the "some-condition" as per your scenario.

setNewSelectedModules(prev => ({
    ...prev,
    subModules: prev.subModules.map((item) => {
        if("some-condition"){
            return {
                ...item,
                moduleCode: e.target.id,
                moduleName: e.target.value
            };
        } else {
            return item
        }
        
    })
}));

answered Jan 28, 2022 at 10:36

Amila Senadheera

13.4k16 gold badges31 silver badges48 bronze badges

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

5 Comments

Amila Senadheera Over a year ago

@Paul, let me know if this is not clear

Paul Over a year ago

thank you Amila, let me try and get back.

Paul Over a year ago

I am not able to use the above code since I am creating this array while user gives input for the module, sub module selections.

Amila Senadheera Over a year ago

What does your initial state look like? can you add more relevant code into the question?

Paul Over a year ago

const [newSelectedModules, setNewSelectedModules] = useState('');

Collectives™ on Stack Overflow

how to update inner array of objects in react use state

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related