Remove value from an array nested in an object also nested in an array

Question

I have a problem with my code. I currently have some data like the one below;

 users: [
    {
      name: 'bolu',
      features: ['Tall'],
    },
    {
      name: 'cam',
      features: ['Bearded', 'Short'],
    },
  ],
};

What I am trying to do is delete/remove a single feature - for example if I pass in 'short' into my redux action. I'd like for it (the 'Short' text) to be removed from the features array. I currently have my redux action set up this way:

export interface UsersDataState {
  name: string,
  features: Array<string>,
}

export interface UsersState {
  users: UsersDataState[];
}

const initialState: UsersState = {
  users: [],
};

    export const usersSlice = createSlice({
      name: 'users',
      initialState,
      reducers: {
        removeUser: (state, action: PayloadAction<string>) => {
          const removedUsers = state.users.filter((user) => user.features.indexOf(action.payload));
          state.users = removedUsers;
        },
       },
   });

So here I am passing in the value in (action.payload is the value being passed in). When this action is dispatched, I want to remove just the word that is passed in from the features array. I hope this is clearer now.

This doesn't work for some reason and I am unable to figure out why. Any help would be appreciated please, thank you.

Your code doesn't really reflect your state. What is state.traits? Where is the user values property? Are you trying to remove the whole user if "Short" is found in the features array, or just that word? Also, that's not an action. That's a reducer, and should return state from the function. — Andy
– Andy, Commented Mar 16, 2022 at 19:28
Hey @Andy, just edited it. Let me know if it still isn't clear. — Ire
– Ire, Commented Mar 16, 2022 at 19:38
What's in action.payload and removedUsers? Can you put console.log or debugger? — Dmitriy Zhiganov
– Dmitriy Zhiganov, Commented Mar 16, 2022 at 20:01

Andy · Accepted Answer · 2022-03-16 19:59:18Z

Your code doesn't match your state structure. Replace traits with users, and values with features.
It looks like that's a part of a reducer, not an action (which is an object, not a function).
You should be returning a new state from the reducer.
Given your update the function should be called removeFeature.

So, I've corrected a few bits of your code based on what I remember from Redux. Note: contrived example.

// State
const state={users:[{name:"joe",features:["Mean","Short"]},{name:"bolu",features:["Tall"]},{name:"cam",features:["Bearded","Short"]}]};

// The reducer accepts a state, and an action
function reducer(state, action) {

  // We destructure the type, and payload, from the action object
  const { type, payload } = action;

  // Depending on the type...
  switch (type) {

    case 'removeFeature': {
      
      // `map` over the users (we return a new state array)
      return state.users.map(user => {
        
        // `filter` out the feature elements
        // that match the payload
        const updatedFeatures = user.features.filter(feature => {
          return feature !== payload;
        });
        
        // Return a new updated object
        return { ...user, features: updatedFeatures };
      
      });
    
    }

    default: return state;

  }

}

const updatedState = reducer(state, {
  type: 'removeFeature',
  payload: 'Short'
});

console.log(updatedState);

Collectives™ on Stack Overflow

Remove value from an array nested in an object also nested in an array

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related