title: Generating Boostrap 4 nav from json data in react
body: <p>I want to create a multi level bootstrap 4 nav using json data in a ReactJS application.
  I have a data source providing the menu structure as shown below:</p>
  <pre><code>[
      {
          &quot;name&quot;: &quot;News&quot;,
          &quot;url&quot;: &quot;/news&quot;
      },
      {.
          &quot;name&quot;: &quot;Events&quot;,
          &quot;url&quot;: &quot;/events&quot;
      },
      {
          &quot;name&quot;: &quot;Get Involved&quot;,
          &quot;url&quot;: &quot;/get-involved&quot;,
          &quot;child&quot;: [
              {
                  &quot;name&quot;: &quot;Event Info&quot;,
                  &quot;url&quot;: &quot;/event-info&quot;,
                  &quot;child&quot;: [
                      {
                          &quot;name&quot;: &quot;Forms &amp; Resources&quot;,
                          &quot;url&quot;: &quot;/forms-resources&quot;
                      }
                  ]
              }
          ]
      },
      {
          &quot;name&quot;: &quot;Membership&quot;,
          &quot;url&quot;: &quot;/membership&quot;
      },
      {
          &quot;name&quot;: &quot;About&quot;,
          &quot;url&quot;: &quot;/about&quot;
      }
  ]
  </code></pre>
  <p>I need to convert this into a multi layer bootstrap 4 nav like this:</p>
  <pre><code>      &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;/news&quot;&gt; News &lt;/a&gt; &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;/events&quot;&gt; Events &lt;/a&gt;&lt;/li&gt;
        &lt;li class=&quot;nav-item dropdown&quot;&gt;
          &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;/get-involved&quot;&gt; Get Involved &lt;/a&gt;
          &lt;ul class=&quot;dropdown-menu&quot;&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt; Second level 1 &lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;/event-info&quot;&gt; Event Info &lt;/a&gt;
              &lt;ul class=&quot;submenu dropdown-menu&quot;&gt;
                &lt;li&gt;&lt;a class=&quot;dropdown-item&quot; href=&quot;/forms-resources&quot;&gt; Forms &amp; Resources&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;/membership&quot;&gt; Membership &lt;/a&gt; &lt;/li&gt;
        &lt;li class=&quot;nav-item&quot;&gt; &lt;a class=&quot;nav-link&quot; href=&quot;/about&quot;&gt; About &lt;/a&gt;&lt;/li&gt;
  </code></pre>
  <p>This is for an application I am building in ReactJS</p>