CODEWITHSUNDEEP
reactjsdropdown
SlimEddy
SlimEddy

Reputation: 13

How to dynamically generate dropdown from nested array in ReactJS

I can make nested dropdown without problems but I have no idea how to make it dynamic. It can go even up to 5-8 levels deep. I understand that it could be done with help of .map() function which will be called inside itself again if there is any more sub-dropdowns. So this way I could access all data but what to do next I don't know.

Array looks something like this(Just some part of it): 

categories = [
  {
    title : "Electronics", path : "Electronics", id : 1, subCat: [
      {title : "Computers", path : "Electronics->Computers", id : 11, subCat: [
        {title : "Desktop", path : "Electronics->Computers->Desktop", id : 111, subCat: [
          {title : "Gaming", path : "Electronics->Computers->Desktop->Gaming", id : 1111, subCat: null},
          {title : "Office", path : "Electronics->Computers->Desktop->Office", id : 1112, subCat: null}
        ]},
        {title : "Laptops", path : "Electronics->Computers->Laptops", id : 112, subCat: [
          {title : "Gaming", path : "Electronics->Computers->Laptops->Gaming", id : 1121, subCat: null},
          {title : "Office", path : "Electronics->Computers->Laptops->Office", id : 1122, subCat: null}
        ]}
      ]}
    ]
  },
  {
    title : "Cars", path : "Cars", id : 2, subCat: [
      {title : "Parts & Accessories", path : "Cars->Parts & Accessories", id : 21, subCat: [
        {title : "Car Parts", path : "Cars->Parts & Accessories->Car Parts", id : 211, subCat: null},
        {title : "Car Accessories", path : "Cars->Parts & Accessories->Car Accessories", id : 211, subCat: null},
        {title : "Parts", path : "Cars->Parts & Accessories->Parts", id : 212, subCat: null},
        {title : "Paintwork", path : "Cars->Parts & Accessories->Paintwork", id : 213, subCat: null},
        {title : "Tyres & Rims", path : "Cars->Parts & Accessories->Tyres & Rims", id : 214, subCat: [
          {title : "Tyres", path : "Cars->Parts & Accessories->Tyres & Rims->Tyres", id : 2141, subCat: null},
          {title : "Rims", path : "Cars->Parts & Accessories->Tyres & Rims->Rims", id : 2142, subCat: null},
          {title : "Trims", path : "Cars->Parts & Accessories->Tyres & Rims->Trims", id : 2143, subCat: null},
          {title : "Accessories", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories", id : 2144, subCat: [
            {title : "Hub Centre Caps", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Hub Centre Caps", id : 21441, subCat: null},
            {title : "Valve Caps", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Valve Caps", id : 21442, subCat: null},
            {title : "Tyre Bags", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Tyre Bags", id : 21443, subCat: null}
            {title : "Bolts & Nut Covers", path : "Cars->Parts & Accessories->Tyres & Rims->Accessories->Bolts & Nut Covers", id : 21444, subCat: null}
          ]},
        ]}
      ]}
    ]
  }
]

Could anybody help me out here please with some idea or example? Thanks.

Upvotes: 1

Views: 1547

Answers (1)

Tom Finney
Tom Finney

Reputation: 2918

If you wanna make something that can be dynamically nested, you can make a component that can render itself and then pass down the current level of items to render.

If you look at this simple example: https://codesandbox.io/s/rln82loyj4?fontsize=14

It renders one component initially and gives it an array of strings and arrays. In the component, it maps through each item and checks if it is an array or not. If it's an array, it will create another element but increment the level and provide next group of items to map through. The level is currently used to set a margin left to make it look tiered.

It's a pretty simple example but the concept should be applicable to what you want - the best way to solve your problem will to make something recursive.

Upvotes: 2

Related Questions