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.

Answer 1

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

Answer 2

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