How to filter product data when checkbox selected is true in reactjs?

Viewed 39

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.

0 Answers
Related