title: react-bootstrap and dynamic menu
body: <p>I'm new to react and trying to do a dynamic menu with the help of some JSON. But I have a problem with level 2. Is there not a better way to do this?
  And can I check if a level 1 has any level 2 or not. Because if there is not any Level 2 i need to use <code>NavItem</code>. If there is I need to use <code>NavDropdown</code>.</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom'
  
  import { Nav, Navbar, NavItem, NavDropdown, MenuItem } from 'react-bootstrap';
  import './Style.css';
  import Logo from '../Logo'
  
  // MockData
  var MockData = [
      {
              "text": "Donorsøgninge",
              "id": "1",
              "parentid": "-1"
      }, {
              "id": "2",
              "parentid": "1",
              "text": "Hot Chocolate"
      }, {
              "id": "3",
              "parentid": "1",
              "text": "Peppermint Hot Chocolate"
      }, {
              "id": "4",
              "parentid": "1",
              "text": "Salted Caramel Hot Chocolate"
      }, {
              "id": "5",
              "parentid": "1",
              "text": "White Hot Chocolate"
      }, {
              "id": "6",
              "text": "Donorsæd",
              "parentid": "-1"
      }, {
              "id": "7",
              "parentid": "6",
              "text": "Caffe Americano"
      }, {
              "id": "8",
              "text": "Caffe Latte",
              "parentid": "6"
      }, {
              "id": "9",
              "text": "Caffe Mocha",
              "parentid": "6"
      }, {
              "id": "10",
              "text": "Cappuccino",
              "parentid": "6"
      }, {
              "id": "11",
              "text": "Pumpkin Spice Latte",
              "parentid": "6"
      }, {
              "id": "12",
              "text": "Bliv donor",
              "parentid": "-1"
      }, {
              "id": "13",
              "text": "Caffe Vanilla Frappuccino",
              "parentid": "12"
      }, {
              "id": "15",
              "text": "450 calories",
              "parentid": "13"
      }, {
              "id": "16",
              "text": "16g fat",
              "parentid": "13"
      }, {
              "id": "17",
              "text": "13g protein",
              "parentid": "13"
      }, {
              "id": "14",
              "text": "Caffe Vanilla Frappuccino Light",
              "parentid": "12"
      }, {
          "id": "18",
          "text": "Services",
          "parentid": "-1"    
      }, {
            "id": "19",
            "text": "Om os",
            "parentid": "-1"  
    }, {
          "id": "20",
          "text": "Info",
          "parentid": "-1"    
  }]
  
  
  export default class Test extends React.Component {
  
    constructor(props) {
          super(props);
          this.navId = '';
  
          this.state = {
        showSubMenu: []
          };
      }
  
  
    render() {
  
      let showNavFirstlevel = MockData.filter(
        (firstLevel) =&gt; {
                  this.navId = firstLevel.id; 
                  return firstLevel.parentid === "-1";
        }
          )
  
      return (
  
        &lt;Navbar&gt;
          &lt;Navbar.Header&gt;
            &lt;Navbar.Brand&gt;
                        &lt;Link to='/' className="navbar-brand"&gt;&lt;Logo/&gt;&lt;/Link&gt;
            &lt;/Navbar.Brand&gt;
          &lt;/Navbar.Header&gt;
          &lt;Nav&gt;
  
            { showNavFirstlevel.map((firstLevel) =&gt; (
                      &lt;NavDropdown eventKey={firstLevel.id} key={firstLevel.id} title={firstLevel.text} id="basic-nav-dropdown"&gt;
                            &lt;Submenu navId={firstLevel.id}/&gt;
                          &lt;/NavDropdown &gt;
                      ))}
  
          &lt;/Nav&gt;
        &lt;/Navbar&gt;
  
          );  
      }
  
  }
  
  
  
  
  
  class Submenu extends React.Component {
    render() {
  
      let showNavSecondlevel = MockData.filter(
        (secondLevel) =&gt; {            
                  return secondLevel.parentid === this.props.navId;
        }
      )
  
      return (
  
        &lt;div&gt;
                { showNavSecondlevel.map((secondLevel) =&gt; (
            &lt;MenuItem key={secondLevel.id} eventKey={secondLevel.id}&gt;{secondLevel.text}&lt;/MenuItem&gt;
                ))}
        &lt;/div&gt;
      )
    }
  }
  </code></pre>