Map and display multiple Array inside an object - Reactjs

Question

I have a JSON file which is nested to create dropdown mega menu levels, I am not sure how to map and render multiple levels of arrays and object to create a tree like structure.

Below is my JSON Structure:

{
  "megamenu": [
    {
      "name": "level1.1",
      "link": "#"
    },
    {
      "name": "level1.2",
      "link": "#",
      "level1.2.1": {
        "A": [
          {
            "name": "A-one",
            "link": "#"
          }
        ],
        "B": [
          {
            "name": "B-one",
            "link": "#"
          }
        ]
      }
    },
    {
      "name": "level1.3",
      "link": "#",
      "children": [
        {
          "name": "level1.3.1",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.1",
              "link": "#"
            }
          ]
        },
        {
          "name": "level1.3.1.2",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.2",
              "link": "#"
            }
          ]
        }
      ]
    }
  ]
}

I am able to map first level like this:

let menuArray = [];
let menu = this.props.menu.megamenu
console.log(menu);
for (let key in menu) {
    menuArray.push(menu[key]);
    return (
        <section>
            <ul>
                {this.props.menu.megamenu.map((menuitem, index) = > (
                <div key={index}>
                    <li>{menuitem.name}</li>
                    </div>
                    ))}
            </ul>
        </section>
    );
}

But would like to map all the levels and display like below structure :

<ul>
    <li>Level1.1
    <li>
    <li>Level1.2
        <div className="dropdown">
            <ul>
                <li>A</li>
                <li>B</li>
            </ul>
            <ul>
                <li>A-one</li>
                <li>b-one</li>
            </ul>
        </div>

    </li>
</ul>
<li>
<li>Level1.3
    <div className="dropdown">
        <div className="col">
            <h2>level1.3.1</h2>
            <ul>
                <li>level1.3.1.1</li>
            </ul>
        </div>
        <div className="col">
            <h2>level1.3.2</h2>
            <ul>
                <li>level1.3.1.2</li>
            </ul>
        </div>
    </div>

</li>
<ul>

I have tried to explain in details for better understanding, any help would be appreciated.

Answer 1

As you would change the structure to something like this,

{
  "megamenu": [
    {
      "name": "level1.1",
      "link": "#"
    },
    {
      "name": "level1.2",
      "link": "#",
      "children": [
        {
          "name": "A-one",
          "link": "#"
        },
        {
          "name": "B-one",
          "link": "#"
        }
      ]
    },
    {
      "name": "level1.3",
      "link": "#",
      "children": [
        {
          "name": "level1.3.1",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.1",
              "link": "#"
            }
          ]
        },
        {
          "name": "level1.3.1.2",
          "link": "#",
          "children": [
            {
              "name": "level1.3.1.2",
              "link": "#"
            }
          ]
        }
      ]
    }
  ]
}

Which is quite obvious as adding new keys inside child object is a wrong way, now, you need a recursive function which will take care of this which can be something like this

  getData = (menu) => {

    return <div>
      <li>{menu.name}</li>
      {(menu.children !== undefined && menu.children.length > 0) && <ul>{

        menu.children.map(data => {
          return this.getData(data);
        })
      }
      </ul>}
    </div>
  }

And inside render you can change to this

 return (
      <section>
        <ul>
          {data.megamenu.map((menuitem, index) => (
            this.getData(menuitem)
          ))}
        </ul>
      </section>
    );

So, what we did is calling the recursive function getdata .

Here is the demo