Combining filter and includes to filter multiple values

Question

I'm trying to create a new state by filtering out values from the current state.

        // Create new state
        const defaultState = [...this.state.defaultData];
        newState = defaultState.filter(movies => !filteredItems.includes(movies.genre_ids));

I think my issue might be traversing into a sub object array as when I do this I just get a blank result.

Example JSON (I'm trying to filter by genre_ids:

https://api.themoviedb.org/3/movie/now_playing?api_key=39b616a19667f17d8ffcaa175fc93491&language=en-US&page=1

Things I've already tried are hardcoding the values, which doesn't work. However I did try filtering by titles using the same method, and hardcoding the titles, which does work. Hence why I think maybe my traversing into genre_ids might be the issue?

I've created a stackblitz to show the current state of things: https://react-sxyyfp.stackblitz.io

Expected result is that when you check more than one checkbox, and then uncheck to remove that particular filter, the current active filters are still applied.

Can you show us the function that removes an ID from the filter, when a box is unchecked ? — Treycos
– Treycos, Commented Jan 31, 2019 at 8:19
movies.genre_ids looks like it contains an array of data. I don't believe you can directly pass that into the .includes method. You'll probably have to iterate through the _ids array using filter — Cat_Enthusiast
– Cat_Enthusiast, Commented Jan 31, 2019 at 8:22

Treycos · Accepted Answer · 2019-02-01 13:36:57Z

2

Since movies.genre_ids is an array in the link you gave, I recommend iterating through every id in it and check if a single one corresponds, this can be done using some :

const defaultState = [...this.state.defaultData];
newState = defaultState.filter(movies => movies.genre_ids.some(genre => !filteredItems.includes(genre)));

If a single id in your movies is also in the filter given by the user, some will return true.

EDIT

The appropriate way to update your state here would be to use the callback version of setState and use your previous state to change the new one :

this.setState(prev => ({
    defaultData: prev.defaultData.filter(movies => movies.genre_ids.some(genre => !filteredItems.includes(genre)));
}))

I can guess that you are fetching this data from an external source. If so, you should fetch your data in the componentDidMount function and set the state right after receiving it (inside the then function or after the await statement depending on which way you prefer).

edited Feb 1, 2019 at 13:36

answered Jan 31, 2019 at 8:29

Treycos

7,4913 gold badges29 silver badges53 bronze badges

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

1 Comment

Stephanie Parker Over a year ago

Thank you. I just tried and yes can confirm it does return true but I'm not sure how to proceed with that in that case. Do I need a completely different method to do this or is there a way I can say that if its true then return the new state with the filtered items? Thank you!

Collectives™ on Stack Overflow

Combining filter and includes to filter multiple values

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