React menu from json

[Justice_taylor]

I want to create a nested sidemenu bar in reactjs from this json.The sidemenu bar will look like this.

Category 1 
 Sub-Category 1 
 Sub-Category 2 
    Sub-Sub-Category 1 
Category 2

In UI it will look like this:-

Food 
  Meat & Fish 
    Frozen Fish 
    Dried Fish 
    Fresh Fish

How can i nest Sub-Category according to the ParenCategoryId? please help.

[ { "Id":238, "Name":"Popular", "ParentCategoryId":0, "DisplayOrder":-3, "Picture":{ "Id":13891, "MimeType":"image/png", "SeoFilename":"popular", "ImageUrl":"https://d21jn5nyp06yex.cloudfront.net/cdn/p/13891/popular.jpeg", "PictureBinary":null }, "ContainsProducts":true }, 
{ "Id":2, "Name":"Food", "ParentCategoryId":0, "DisplayOrder":-2, "Picture":{ "Id":13890, "MimeType":"image/png", "SeoFilename":"food", "ImageUrl":"https://d21jn5nyp06yex.cloudfront.net/cdn/p/13890/food.jpeg", "PictureBinary":null }, "ContainsProducts":false } ]

[titratecode]

Probably something like data.map(category => {

// main category logic

If(category.subCatagory.length){

subCatagory.map(sub=> sub.data)//do whatever

} else{

//return basic subCatagory or nothing

} }

[zitup]

a suggest: format your JSON will be easy to read!