A basic react filter component
I have some checkboxes that I want to filter a .json with.
There's three 'categories' or groupings of checkboxes; make, year, and color.
https://github.com/nnall/Inventory/blob/main/src/filter.js
One category:
if multiple checkboxes are checked, then return matches for all. Ex; if multiple colors are are checked, make 'results' array a combination of matches of all selected colors.
Between categories:
its only a "match" if it satisfies both/all categories' checked values
^
This one has a problem though, which is situations where user selects multiple of one category and also selects another category.. or multiple in multiple categories?
I ultimately want to be able to filter on 12 fields.
THE SEARCHBAR
I also have a searchbar whose text input has an onChange(), which with each triggers each peice of text entered to be immediately searched across 5 fields, and immediately returned in the results.
I don't know how these two - searchbar & chekcboxes - would need to be reconciled with each other but I'm looking for guidance.
At least with the checkboxes, for each category, I thought I'd output an array of matches just based on that category, and then, if multiple categories outputted arrays, I'd selected only matches that existed in all arrays.
{
"stock": "RZ239809",
"year": "2017",
"make": "Chevrolet",
"model": "Cruze",
"vin": "VINNUMBERHERE",
"retailprice": "200.00",
"color": "Gray",
"location": "S05_Montgomery1",
"class": "Car",
"requireddown": "2100.00",
"status": "Service",
"photo": null
},
There's three 'categories' or groupings of checkboxes; make, year, and color.
https://github.com/nnall/Inventory/blob/main/src/filter.js
One category:
if multiple checkboxes are checked, then return matches for all. Ex; if multiple colors are are checked, make 'results' array a combination of matches of all selected colors.
Between categories:
its only a "match" if it satisfies both/all categories' checked values
^
This one has a problem though, which is situations where user selects multiple of one category and also selects another category.. or multiple in multiple categories?
I ultimately want to be able to filter on 12 fields.
THE SEARCHBAR
I also have a searchbar whose text input has an onChange(), which with each triggers each peice of text entered to be immediately searched across 5 fields, and immediately returned in the results.
I don't know how these two - searchbar & chekcboxes - would need to be reconciled with each other but I'm looking for guidance.
At least with the checkboxes, for each category, I thought I'd output an array of matches just based on that category, and then, if multiple categories outputted arrays, I'd selected only matches that existed in all arrays.
{
"stock": "RZ239809",
"year": "2017",
"make": "Chevrolet",
"model": "Cruze",
"vin": "VINNUMBERHERE",
"retailprice": "200.00",
"color": "Gray",
"location": "S05_Montgomery1",
"class": "Car",
"requireddown": "2100.00",
"status": "Service",
"photo": null
},
GitHub
Contribute to nnall/Inventory development by creating an account on GitHub.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Was this page helpful?
