title: How to create multi filter in react js
body: <p>I easily can make single filtering but when there are multiple criteria to filter by that is more difficult for me.</p>
  
  <p>1) the default should be: show all,</p>
  
  <p>2) I have an object that has category, time, and size for a filter,</p>
  
  <p>3) When there are no matching criteria, should have some p/div that shows that no filters are matching</p>
  
  <p>4) as mentioned earlier I need to filter by category time and size one by one (single filter) or at the same time (multi-filter) depending on each other.</p>
  
  <p>5) the filters should be represented by buttons and for example, for the category, there should be 4 buttons representing each category, for the size also 4 buttons from <code>2-4</code>, <code>4-8</code>, <code>8-16</code> and <code>16-32</code>, for the time there should be also 4 buttons <code>5-20</code>, <code>20-40</code>, <code>40-60</code>, <code>60+</code> and reset all of course.</p>
  
  <p>Example (id:7 no category): </p>
  
  <pre><code>[ 
  
   { "id": "0",
     "category": "Racing",
      "size": "16-32",
      "time": "30min" } ,
  
  
   { "id": "1",
     "category": "FPS",
      "size": "16-32",
      "time": "20min" } , 
  
  { "id": "2",
     "category": "RTS",
      "size": "10-12",
      "time": "40min" } , 
  
  { "id": "3",
     "category": "RTS",
      "size": "8-16",
      "time": "60min" } , 
  
  { "id": "4",
     "category": "RTS",
      "size": "2-4",
      "time": "10min" } , 
  
  { "id": "5",
     "category": "Racing",
      "size": "4-8",
      "time": "5min" } , 
  
  { "id": "6",
     "category": "Racing",
      "size": "4-8",
      "time": "15min" } , 
  
  { "id": "7",
     "category": "",
      "size": "2",
      "time": "20min" } , 
  
  { "id": "8",
     "category": "Third Person",
      "size": "2-4",
      "time": "70min" } ,
  
  { "id": "9",
     "category": "Racing",
      "size": "1",
      "time": "1min" } ,
  
  ]
  </code></pre>