How can I filter array of state in react?

Question

I have order reducer, which has many states.

const initialState = {
 channel: null,
 order: {},
 fetching:true,
 menu: [],
 categories: [],
 subcategories: [],
 currentCategoryId: 1,
 currentSubcategoryId: 5,
 currentMenu: [],
};

What I want to filter is menu. menu is array of state which has objects of menu_item I have currentCategoryId and currentSubcategoryId. What I want to do with these states is that by using currentCategoryId and currentSubcategoryId to filter menu and put filtered states to currentMenu.

case Constants.ORDER_CHANNEL_CONNECTED:
 return
  {...state,currentMenu: action.menu.map((menu) => {
                    if(state.currentCategoryId == menu.category_id){
                        return menu;
                    }
                    else return false;}}

So to do that I made code like above. Even though it returns some filtered value, it shows same number of array with many false values. I want to find other approaches to do that..

How can I do this?

Thanks in advance.

Ilya Lyamkin · Accepted Answer · 2019-11-11 15:40:38Z

14

Please use the filter function:

{...state,currentMenu: action.menu.filter((menu) =>
state.currentCategoryId == menu.category_id)}

P.S: I agree with the below answer, it's better to use Immutable.js

edited Nov 11, 2019 at 15:40

answered Jan 16, 2017 at 11:30

Ilya Lyamkin

3843 silver badges10 bronze badges

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

2 Comments

D.R Over a year ago

why do you think that it is better to use Immutable.js?? any benefits compare to use just filter function?

Ilya Lyamkin Over a year ago

Main reason to use immutable is to avoid expensive cloning whole object. Immutable object store only difference to the previous version. It works faster especially in the large project with big state objects. You can read more about benefits here

Harkirat Saluja · Accepted Answer · 2020-08-04 11:16:36Z

3

I would say you can use immutable.js for this purpose. You can add filter to your map.

You can try something like

Immutable.map(state.menu).filter(state.currentCategoryId===menu.category_id)

P.S: I have not tested the above code but it should work with little modifications.

You can check out more about immutable here

edited Aug 4, 2020 at 11:16

answered Jan 16, 2017 at 11:33

Harkirat Saluja

8,1145 gold badges53 silver badges74 bronze badges

1 Comment

D.R Over a year ago

thanks, I tried currentMenu: Immutable.map(state.menu).filter(state.currentCategoryId===menu.category_id), but it triggers error that Immutable.map is not defined.. so I tried Immutable.Map(state.menu).... but it still triggers error that menu is not defined How should I change this?

Sraw · Accepted Answer · 2017-11-29 07:52:43Z

2

onTodoClick(id){
      this.setState({items: this.state.items.filter(item => item.news_id == id )
      });
    }

edited Nov 29, 2017 at 7:52

Sraw

20.6k11 gold badges61 silver badges93 bronze badges

answered Nov 29, 2017 at 6:39

Parth Navadiya

7207 silver badges9 bronze badges

Comments

Michael Nelles · Accepted Answer · 2019-12-20 01:13:57Z

2

If you are filtering by ID and it is numeric watch out for comparing strings and numbers. I had to use parseInt (as below).

Arr.filter(single => parseInt(single.id) !== parseInt(id))

Consider this if javascript filter array is not working

answered Dec 20, 2019 at 1:13

Michael Nelles

6,0588 gold badges49 silver badges61 bronze badges

Collectives™ on Stack Overflow

How can I filter array of state in react?

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related