ReactJs display data in optgroup

Question

this.props.datacat.map(singleData=>{
  return Object.keys(singleData).map((key,i) =>{
     if(key==='name'){
        return <OptGroup label  = {singleData[key]}>
     }else{
        return <Option key= {key} >{singleData[key]}</Option> 
     }
        return </OptGroup>
  })
})

Data of (this.props.datacat)

[
  {
    "4967": "Others.",
    "4968": "Sports & Beachwear > Others.",
    "4969": "Lingerie & Nightwear > Others.",
    "4971": "Pants & Shorts > Others.",
    "name": "Women Clothes"
  },
  {
    "4798": "Supplements > Others.",
    "4802": "Men's Grooming > Others.",
    "4952": "Others.",
    "4953": "Medical Supplies > Others.",
    "4954": "Personal Pleasure > Others.",
    "4955": "Personal Care > Others.",
    "4956": "Pedicure & Manicure > Others.",
    "6647": "Lips > Lip Tint"
    "name": "Health & Beauty"
  }
]

Above code which is tried to display the data if the key is name then to create the optgroup label else it will display all the data in option value. After that, the option value id which is <Option key= {key} >{singleData[key]}</Option> should inside the option value and the text to display is the value. Anyone know how to do this :( ?

Answer 1

For each entry of this.props.datacat create an OptGroup, then populate it with all the options of that entry except the one with the key name:

this.props.datacat.map((singleData) => (
  <OptGroup label={singleData["name"]}>
    {Object.keys(singleData)
      .filter(key => key !== "name")
      .map(key => (
        <Option key={key}>{singleData[key]}</Option>
      ))}
  </OptGroup>
));

Demo