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.

Accepted Answer

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

Answer 3

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

Answer 4

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

How Can I Filter Array of State in React?

4 Answers

Must Read

Your Answer

Sophia Al-Mansoor

How Can I Filter Array of State in React?

4 Answers

Must Read

Your Answer

Sign up or log in

Post as a guest

Sophia Al-Mansoor