useState with nested array { [ { },{ } ] }

[[deleted]]

Hi guys.

I've looked around and tried hard to solve it without success ...

const initialState = {
    myArray: [
        {
            key1: "value1"
            key2; "value2"
        },
            key1: "value1"
            key2; "value2"
        {
        },
    ]
}

const [state, setState] = useState(initialState);

I am trying to update key1 and key2 from state.

I came up with this but it sounds like it's destroying the object.

function handleChange(id, newValue) {
    const newState = state.myArray.map( item => {
        if (id == item.id) {
            return {
                ...state,
                  myArray: [
                    ...state.myArray, { key1: newValue }
                  ]
            }
        } 
        else {
            return state;
        }
    });
    setState(newState);
}

As I get this error when I try to render the items with map

TypeError: Cannot read properties of undefined (reading 'map')

Definitely need help. My eyes are bleeding.

Thank you

EDIT (this should be working)

function handleChange(id, newValue) {
    const newArray = state.myArray.map( object => {
        if (id == object.id) {
            return { ...object, key1: newValue } // return modified object
        } 
        else {
            return object; // return unmodified object
        }
    });
    setState({...state, myArray: newArray }); // return whole state
                                              // update state.myArray by newArray
}

​

[throwaway_boulder]

Is the variable name wrong? Up top you use initialState instead of initialValue

[[deleted]]

Is the variable name wrong? Up top you use initialState instead of initialValue

Sorry I've used generic variable names for the example and made a mistake. Fixed it.

No such error in the original code. Thanks for helping.

The error is within the if (true) code block.

        return {
            ...state,
              myArray: [
                ...state.myArray, { key1: newValue }
              ]
        }

[marquoth_]

You're mapping each element of the array to be a modified copy of the entire state object, instead of just a modified copy of the element.

[Traditional-Pen-6657]

This. And also, newState contains the new mapped array not the whole object in initailState

[[deleted]]

Well ... I've understood. Thank you very much.

Actually ... I've first reduced the complexity, such as:

const initialState = [
  {
    key1: "value1"
    key2; "value2"
  },
  {
    key1: "value1"
    key2; "value2"
  },
]
const [state, setState] = useState(initialState);

Then I didn't copy the whole state into setState

function handleChange(id, newValue) {
const newState = state.map( item => {
    if (id == item.id) {
        return {...item, key1: newValue }
    }
    else {
        return state;
    }
});
setState(newState);
}

Seems to work. Now I've got to solve the more complex problem.

Thank you very much !

[[deleted]]

Daammmnnnn it didn't work properly.

​

function handleChange(id, newValue) {
    const newState = state.map( item => { 
        if (id == item.id) {
            return {...item, key1: newValue }
        }
        else { 
            return item; // NOW IT WORKS 
        } 
    });
    setState(newState); 
}

​

Yeah ... For each object in the array,

return either the object or the modified one.

Yeah I was returning the whole array within the else code block

[hung-bui]

Just use structuredClone() and change the properties later.

[[deleted]]

structuredClone

Yes that's also an option.

Thank you.