How to dynamically generate dropdown from nested array in ReactJS

Question

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.

Welcome to Stack Overflow SlimEddy! This is not a code writing service. It sounds like you have a good idea of an approach. Try that and come back with specific questions if you can't get it to work. — Tholle
– Tholle, Commented Mar 12, 2019 at 12:59
Please, check my answer here, it might cover your problem: stackoverflow.com/questions/51004421/…. This way you can create unlimited cascading dropdowns. — gazdagergo
– gazdagergo, Commented Mar 12, 2019 at 13:07

Tom Finney · Accepted Answer · 2019-03-12 13:10:21Z

2

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.

answered Mar 12, 2019 at 13:10

Tom Finney

2,93821 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically generate dropdown from nested array in ReactJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related