I have searched a lot regarding filter of product data using checkbox but couldn't able to find the right answer for my issue.
Problem: I'm making a product filter page using checkbox in react but could not found the proper way to filter the true value of object key.
ie. I have to only filter object key value === true. Below array object is after checkbox selection before the selection it will be falsy value.
const category = [
{
"type":"Color",
"options":[
{
"key":"Red",
"value":true
},
{
"key":"Blue",
"value":false
},
{
"key":"Green",
"value":true
}
]
},
{
"type":"Gender",
"options":[
{
"key":"Men",
"value":true
},
{
"key":"Women",
"value":false
}
]
},
{
"type":"Price",
"options":[
{
"key":"0 - Rs. 250",
"from":0,
"to":250,
"value":false
},
{
"key":"Rs. 251 - 450",
"from":251,
"to":450,
"value":true
},
{
"key":"Rs. 451 & above",
"from":451,
"to":"Number.MAX_VALUE",
"value":false
}
]
},
{
"type":"Type",
"options":[
{
"key":"Polo",
"value":false
},
{
"key":"Hoodie",
"value":false
},
{
"key":"Basic",
"value":true
}
]
}
]
const productData = [ { "id": 1, "name": "Black Polo", "type": "Polo", "price": 250, "currency": "INR", "color": "Black", "gender": "Men", "quantity": 3 }, { "id": 2, "name": "Blue Polo", "type": "Polo", "price": 350, "currency": "INR", "color": "Blue", "gender": "Women", "quantity": 3 }, { "id": 3, "name": "Pink Polo", "type": "Polo", "price": 350, "currency": "INR", "color": "Pink", "gender": "Women", "quantity": 6 }, { "id": 4, "name": "Black Hoodie", "type": "Hoodie", "price": 500, "currency": "INR", "color": "Black", "gender": "Men", "quantity": 2 }, { "id": 5, "name": "Green Polo", "type": "Polo", "price": 250, "currency": "INR", "color": "Green", "gender": "Men", "quantity": 1 }, { "id": 6, "name": "Green Polo", "type": "Polo", "price": 350, "currency": "INR", "color": "Green", "gender": "Women", "quantity": 1 }, { "id": 7, "name": "Blue Hoodie", "type": "Hoodie", "price": 500, "currency": "INR", "color": "Blue", "gender": "Women", "quantity": 2 }, { "id": 8, "name": "Black Hoodie", "type": "Hoodie", "price": 500, "currency": "INR", "color": "Black", "gender": "Women", "quantity": 5 }]
Now,I need filtered product data from the above category data and product-data.
Here's my Codesandbox link for this.