Reactjs 如何在react js中创建多过滤器

我可以很容易地进行单一筛选，但当有多个条件进行筛选时，这对我来说更困难

1） 默认值应为：全部显示

2） 我有一个对象，它具有过滤器的类别、时间和大小

3） 当没有匹配条件时，应该有一些p/div显示没有匹配的筛选器

4） 如前所述，我需要根据类别时间和大小逐个（单个过滤器）或同时（多个过滤器）进行过滤，这取决于彼此

5） 过滤器应该用按钮表示，例如，对于类别，应该有4个按钮表示每个类别，对于大小，也应该有4个按钮，分别来自

2-4

、

4-8

、

8-16

和

16-32

，此时还应该有4个按钮

5-20

、

20-40

，

40-60

，

60+

，当然要全部重置

示例（id:7无类别）：

[ 

 { "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" } ,

]