title: React SideBar Multi Level dropdown recursion
body: <p>I have a code below. I want when the user clicks on the Analytics tab on the sidebar navigation, it will display the submenu on the right side. Can anyone have some ideas to do it?</p>
  <p><a href="https://i.stack.imgur.com/xqOWL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xqOWL.png" alt="Dashboard" /></a></p>
  <p>route.js</p>
  <pre><code>
  import Analytics from 'views/Analytics.jsx';
  
  const dashboardRoutes = [
     {
       path: &quot;/analytics&quot;,
      name: &quot;Analytics&quot;,
      icon: &quot;pe-7s-graph&quot;,
      component: Analytics,
      layout: &quot;/admin&quot;,
      dashboardRoutes : 
      [{
         name: &quot;Building&quot;,
        component: Buildings
      },
      {
        name: &quot;Group&quot;,
        component: Groups
      },
      {
        name: &quot;Rooms&quot;,
        component: Rooms
      }
      
  ]
  
  </code></pre>
  <p>In the Sidebar.js</p>
  <pre><code>import React, { Component } from &quot;react&quot;;
  import { NavLink, Link } from &quot;react-router-dom&quot;;
  import { NavItem, Nav, NavDropdown, MenuItem } from &quot;react-bootstrap&quot;;
  import AdminNavbarLinks from &quot;../Navbars/AdminNavbarLinks.jsx&quot;;
  import {FormControl} from 'react-bootstrap';
  
  import logo from &quot;assets/img/instahubIcon.png&quot;;
  import List from 'material-ui/core/List'
  import ListItem from 'material-ui/core/ListItem'
  import ListItemText from 'material-ui/core/ListItemText'
  
  class Sidebar extends Component {
    constructor(props) {
      super(props);
      this.state = {
        width: window.innerWidth
      };
    }
    activeRoute(routeName) {
      return this.props.location.pathname.indexOf(routeName) &gt; -1 ? &quot;active&quot; : &quot;&quot;;
    }
    updateDimensions() {
      this.setState({ width: window.innerWidth });
    }
    componentDidMount() {
      this.updateDimensions();
      window.addEventListener(&quot;resize&quot;, this.updateDimensions.bind(this));
    }
     render() {
      const sidebarBackground = {
        backgroundImage: &quot;url(&quot; + this.props.image + &quot;)&quot;
      };
      return (
        &lt;div
          id=&quot;sidebar&quot;
          className=&quot;sidebar&quot;
          data-color={this.props.color}
          data-image={this.props.image}
        &gt;
            {this.props.hasImage ? (
              &lt;div className=&quot;sidebar-background&quot; style={sidebarBackground} /&gt;
            ) : (
              null
            )}
          &lt;div className=&quot;logo&quot;&gt;
            &lt;a
              href=&quot;https://www.creative-tim.com?ref=lbd-sidebar&quot;
              className=&quot;simple-text logo-mini&quot;
            &gt;
              &lt;div className=&quot;logo-img&quot;&gt;
                &lt;img src={logo} alt=&quot;logo_image&quot; /&gt;
              &lt;/div&gt;
            &lt;/a&gt;
           
          &lt;/div&gt;
          &lt;div className=&quot;sidebar-wrapper&quot;&gt;
            &lt;ul className=&quot;nav&quot;&gt;
              {this.state.width &lt;= 991 ? &lt;AdminNavbarLinks /&gt; : null}
              {this.props.routes.map((prop, key) =&gt; {
                if (prop.invisible) return null;
                if (!prop.redirect)
                  return (
                    &lt;li
                      className={
                        prop.upgrade
                          ? &quot;active active-pro&quot;
                          : this.activeRoute(prop.layout + prop.path)
                      }
                      key={key}
                    &gt;
                      &lt;NavLink
                        to={prop.layout + prop.path}
                        className=&quot;nav-link&quot;
                        activeClassName=&quot;active&quot;
                      &gt;
                        &lt;i className={prop.icon} /&gt;
                        &lt;p&gt;{prop.name}&lt;/p&gt;
                      &lt;/NavLink&gt;
                      
                    &lt;/li&gt;
                   
                  );
                  
                return null;
              })}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Sidebar;
  
  </code></pre>
  <p>Can anyone have a look at my code above and give me some recommendations? Thanks a lot for your help</p>