Redux : Remove an Item from an Array challenge help

JavaScript
1

Tell us what’s happening:
Im not sure why this is not passing the test. Am I not allowed to use filter() on this challenge?
any feedback will be appreciated.

Your code so far


const immutableReducer = (state = [0,1,2,3,4,5], action) => {
  switch(action.type) {
    case 'REMOVE_ITEM':
      const newState = state.filter( val => val !== action.index );
     
      return newState;
    default:
      return state;
  }
};

const removeItem = (index) => {
  return {
    type: 'REMOVE_ITEM',
    index
  }
}

const store = Redux.createStore(immutableReducer);

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/redux/remove-an-item-from-an-array/

3

Thank you for the hint .

4

Your code must delete newState[action.index],but not a number.

I cant think up better, but you may finish the test with it. How can i do it with slice or concat methods?

let newState = [...state];
newState.splice(action.index, 1);
return newState;
1 Like
5

This is because you are not getting the value you think you are when using filter

// val is the actual item in the index
const newState = state.filter(val => val !== action.index );

The filter callback has a few more parameters that you could make use of. Take a look at the screenshot from mdn below

09
091076×708 46 KB

3 Likes
6

As JM-Mendez mentioned your filter function is wrong. Filter method works for “value” filtering not index.
To filter the array by index you have to use:

return state.filter( item=> item != state[action.index]  )
2 Likes
7

This was the slice/concat method.
return state.slice(0, action.index).concat(state.slice(action.index + 1, state.length));

but yes if you look at the link shared by JM-Mendez you can use the filter method.

3 Likes
8

Your solution is way more consice than mine.
My original solution state.slice(0,action.index).concat(state.slice(action.index+1)).
Your solution corrected state.filter((v,i)=>i!=action.index)

2 Likes
9

I got these from the Redux API, both work

return [
        ...state.slice(0, action.index),
        ...state.slice(action.index + 1)
]

Second: ‘As long as we make a copy first, we can safely mutate the copy’:

    let newArray = state.slice();
    newArray.splice(action.index, 1);
    return newArray;
3 Likes
10

Sorry to revive this thread but can you help me better understand the first solution with a brief explanation of what the code is doing? Thanks!

return [
…state.slice(0, action.index),
…state.slice(action.index + 1)
]

11

I’m gonna try and explain because it took me a while to get it too. So let’s say you want to send an action to remove item 3, so the result is [0,1,2,4,5].

So with slice you slice up until 3: arr.slice(0, 3), which gives you [0,1,2]. Then you do arr.slice(4) which gives you [4,5] because it goes until the end of the array from where you tell it to start.

And the +1 you’re seeing is where it continues from, in this case 3+1 =4 (because we want to eliminate 3).

Finally you need destructuring to “glue” the arrays back together, hence the …state etc.

I hope this makes sense.

4 Likes
12

Makes perfect sense, thank you Marias.

13

the filter() method provides an optional index that you can leverage as well
return state.filter((item, index) => index != action.index );

15

Good going @Fourleaftayback In the last .slice() used, the second argument - state.length - is not needed per the MDN
" If end is omitted, slice extracts through the end of the sequence ( arr.length )."

1 Like