Javascript splice working wrong with redux

Question

My splice is deleting everything but item clicked.
I have studied a popular post here about that, but it didn't worked for me, same for that one about redux and modifying a state.
I have a redux function which is meant to delete an item - action.item contains an unique index of an item that I want to be deleted:

const deleteItem = (state, action) => {
    return updateObject(state, {
        orderedItems: state.orderedItems.splice(action.item, 1)
    });
};

updateObject looks like that:

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    };
};

Different solutions as f.e:

const deleteItem = (state, action) => {
    return state.orderedItems.filter(element => element !== action.item);
};

Not only don't work, but also gives me TypeError: Cannot read property 'map' of undefined because im using mapping to show every item

let basket = (
            <aside>
                {this.props.orderedItems.map((orderItem, i) => (
                    <OrderElement key={i} id={i} title={orderItem.item} />
                ))}
            </aside>
        );

Thats an initial state of the store:

const initialState = {
    loading: false,
    numberOfReservations: "",
    orderedItems: [],
};

Before clicking Reco3:
Page before clicking an item to delete
And after clicking:
Page after clicking and Reco3 item
Im completly clueless, thanks in advance for help.

Instead of adding links to images of the rendered markup add a [mcve] with examples for `state.orderedItems` and `action.item` — Andreas, Nov 24 '20 at 13:42
[`splice`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) removes elements from the array in place and returns the elements removed. — Heretic Monkey, Nov 24 '20 at 13:43
@hereticmonkey I understand, but still don't know how to approach the problem, as every other solution makes my page go down. I added a bit more info to the post — Marcin Szaro, Nov 24 '20 at 14:00
In React, and especially Redux, you want to make sure you don't manipulate state arrays directly, because React won't be able determine it's changed. You need to set the array to a new array, in this case without the item you want to remove. There are a few questions about this already on SO. — Heretic Monkey, Nov 24 '20 at 14:09
Does this answer your question? [Delete item from state array in react](https://stackoverflow.com/questions/36326612/delete-item-from-state-array-in-react) — Heretic Monkey, Nov 24 '20 at 14:09
Could you please provide reproducible code in codesandbox ? Looks like everything fine — Raja Jaganathan, Nov 24 '20 at 14:34
@hereticmonkey after 2hrs of searching, i finally did it like that `let test = [...state.orderedItems]; test.splice(action.item, 1); return { ...state, orderedItems: test };` Thing i was missing all the time was spreading the original state so it wont update, or if it did, my page wont react to that change. Anyway, thanks for your time — Marcin Szaro, Nov 24 '20 at 15:23

score 0 · Answer 1 · answered Nov 24 '20 at 13:54

0

I may be wrong here, but isn't this because splice returns the removed items from the array?

You're setting orderedItems to the item that you removed.

let months = ['Jan', 'March', 'April', 'June'];
let output = months.splice(0, 1);
//Output: ["Jan"]
//Months: ['March', 'April', 'June']

So, you might want to use something other than splice, that or implement it in a different way.

answered Nov 24 '20 at 13:54

OGoodness

38
1
5

I edited a post and added clarification - I tried other solutions, but they arent working at all giving me errors or just doing nothing, and the problem is I have no clue what am I doing wrong. – Marcin Szaro Nov 24 '20 at 13:59

Javascript splice working wrong with redux

1 Answers1