Js spread operator and nested arrays

Question

I have following object

state = {"line": [
   {"media": [1, 2, 3 ]},
   {"media": []},
   {"media": []},
]}

What I need is to remove element in media array.

I try the following

return {
            ...state, line: [{
                ...state.line[line_index], media = [
                        ...state.line[line_index].media.slice(0, action.payload.index),
                        ...state.line[line_index].media.slice(action.payload.index + 1)
                ]
            }]
        }

but it doesn't work, it replaces media with object.

I don't get how to do it correctly. Can some one please show the way and describe it please

what do you want to achieve? what is your actions payload looking like? — JanS
– JanS, Commented Apr 27, 2018 at 5:44

JanS · Accepted Answer · 2018-04-27 06:14:26Z

5

What you forgot is reassembling the line array properly. Try breaking it down like this:

const changedElement = {
    ...state.line[lineIndex],
    media: [
        ...state.line[lineIndex].media.slice(0, action.payload.index),
        ...state.line[line_index].media.slice(action.payload.index + 1)
    ]
}

return {
    ...state,
    line: [
        ...state.line.slice(0, line_index),
        changedElement,
        ...state.line.slice(line_index + 1)
    ]
}

What you want to do is write the current structure of your state:

state = {
    line: [
        {
            media: []
        },
        {
            media: []
        }
    ]
}

What you can then do is making it generic and containing state. So, state should be a copy of state (by putting ...state in it) and line should be a copy of line. The only difference between line and state is that it's an array. Making an immutable copy of an array is a bit more involved than making such a copy of an object. But in your code, you did this already for your changedElement.

For a further read on this, you should have a look at immutable update patterns, as these are just recipes you can always reuse: https://redux.js.org/recipes/structuring-reducers/immutable-update-patterns

edited Apr 27, 2018 at 6:14

answered Apr 27, 2018 at 5:49

JanS

2,0653 gold badges29 silver badges30 bronze badges

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

1 Comment

Alexey K Over a year ago

that works great, thank you very much. can you please be so kind and describe step by step, because for me it is pain each time when I have to deal with nested arrays and spread op.

Collectives™ on Stack Overflow

Js spread operator and nested arrays

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related