Properly filter an array inside other array in reactjs

Question

Hello I am trying react for the first time and I am having some trouble with my filter function. Here's the code:

So this is my render method in my component:

const categoryFilter = this.state.appItems.filter(item =>
      item.categories.filter(str => {
        return str.includes(active);
      })
    );

const appList = categoryFilter.map(appItem => (
      <AppItem appItem={appItem} key={appItem.id}></AppItem>
    ));

return (
      <React.Fragment>
        <div className="flex-container">
          <NavCategories
            categories={this.state.categories}
            onClick={this.handleClick}
            active={active}
          />
          <section className="apps-list">
            <header>
              <input type="text" placeholder="Search by App" />
            </header>
            <ul>{appList}</ul>
          </section>
        </div>
      </React.Fragment>
    );

this.state.appItems is an array coming from a json file, here's a snippet:

[ {
    "id": "12312",
    "name": "Test",
    "description": "test.",
    "categories": ["Voice", "Delivery", "Optimization"],
    "subscriptions": [
      {
        "name": "Trial",
        "price": 0
      },
      {
        "name": "Professional",
        "price": 3500
      }
    ]
  },]

Active is a string to manage active class items on another component.

Everything renders correctly, but it is never filtered even though the active state is changing everytime. I have tried multiple ways, but this Filter method is getting me confused a lot because I want to filter an array thats inside another array and want to filter the whole AppItem array.

If anyone could explain/give me some tips I would love it. Thanks in advance :)

Your inner filter returns an array which is always truthy. Add .length to the inner filter call to return an integer that will be falsey if empty and will properly trigger the outer filter. — ggorlen
– ggorlen, Commented Dec 4, 2019 at 19:01

jered · Accepted Answer · 2019-12-04 19:02:56Z

1

Array.filter() returns a new array with the filtered elements in it. So your inner filter will always return an array of at least zero elements, which evaluates to a truthy value, and your outer filter will just include every element in the original array.

Just switch your inner filter to be an Array.includes() instead, which will return true or false.

const categoryFilter = this.state.appItems.filter(item =>
  item.categories.includes(active)
);

answered Dec 4, 2019 at 19:02

jered

11.6k2 gold badges26 silver badges34 bronze badges

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

1 Comment

andrecj Over a year ago

I would swear that I've tried that before and it didn't work because somehow it showed me "include is not a function", but maybe I have done some changes to it. So yeah, this is correct and thanks for the explanation. :)

Collectives™ on Stack Overflow

Properly filter an array inside other array in reactjs

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