title: Filter json on React
body: <p>I have to filter this array on 2 ways, one is while the user types and the other is when he clicks on some category, and my code is like this:</p>
  
  <p><a href="https://gist.github.com/pedroapfilho/dbd48b1bf10c4ff625929cb2f67c6b41" rel="nofollow noreferrer">https://gist.github.com/pedroapfilho/dbd48b1bf10c4ff625929cb2f67c6b41</a></p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  import appslist from "../apps.json";
  
  import Sidebar from "../components/Sidebar/Sidebar";
  import HeaderSearch from "../components/HeaderSearch/HeaderSearch";
  import ListContainer from "../components/ListContainer/ListContainer";
  import Pagination from "../components/Pagination/Pagination";
  
  class App extends Component {
    state = {
      list: appslist,
      searchfield: "",
      selectedcategory: "",
      currentpage: 1,
      itensperpage: 3
    };
  
    onSearchChange = event =&gt; {
      this.setState({ searchfield: event.target.value });
    };
  
    onClickCategory = event =&gt; {
      this.setState({ selectedcategory: event.target.id });
    };
  
    render() {
      const {
        list,
        searchfield,
        currentpage,
        itensperpage,
        selectedcategory
      } = this.state;
  
      let filteredList;
  
      filteredList = list.filter(list =&gt; {
        return list.name.toLowerCase().includes(searchfield.toLowerCase());
      });
  
      filteredList = list.filter(list =&gt; {
        return list.categories[0].toLowerCase().includes(selectedcategory.toLowerCase());
      });
  
      return (
        &lt;div className="flex-container"&gt;
          &lt;Sidebar categorylist={list} selectedCategory={this.onClickCategory} /&gt;
          &lt;section className="apps-list"&gt;
            &lt;HeaderSearch searchChange={this.onSearchChange} /&gt;
            &lt;ListContainer list={filteredList} /&gt;
            &lt;Pagination currentPage={currentpage} itensperpage={itensperpage} /&gt;
          &lt;/section&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>I kept both <code>filteredList</code> there, but only the last one will work</p>
  
  <p>How can I make both works at the same time?</p>