title: How to display submenu in Reactjs?
body: <p>I am making an application in reactjs with reactstrap (Bootstrap) css framework. And I am trying to make a navbar with menu and sub menu (Only one level of sub menu).</p>
  
  <p><strong><a href="https://stackblitz.com/edit/reactstrap-navbartoggler-example-fmbvpa" rel="nofollow noreferrer">Working Demo</a></strong></p>
  
  <p>And I am working to achieve this in a single <code>JS</code> file,</p>
  
  <p><strong>Example.JS</strong></p>
  
  <pre><code>&lt;UncontrolledButtonDropdown&gt;
     &lt;DropdownToggle caret size="md"&gt;
        Menu 1
     &lt;/DropdownToggle&gt;
  
     &lt;DropdownMenu&gt;
        &lt;span&gt; Sub Menu 1 &lt;/span&gt;
        &lt;DropdownItem&gt;Sub Menu 1.1&lt;/DropdownItem&gt;
        &lt;DropdownItem&gt;Sub Menu 1.2&lt;/DropdownItem&gt;
  
        &lt;span&gt; Sub Menu 2 &lt;/span&gt;
        &lt;DropdownItem&gt;Sub Menu 2.1&lt;/DropdownItem&gt;
        &lt;DropdownItem&gt;Sub Menu 2.2&lt;/DropdownItem&gt;
     &lt;/DropdownMenu&gt;
  &lt;/UncontrolledButtonDropdown&gt;
  </code></pre>
  
  <p>I am in the need of above part alone.</p>
  
  <p>I am listing a dropdown menu on click of toggler button and there I am having <code>Menu 1</code> as a dropdown.</p>
  
  <p>For normal view let it be as it is but for <strong>responsive</strong> view the menu should be displayed in an order. </p>
  
  <p>So it will be looking like,</p>
  
  <p>The navbar with dropdown menu</p>
  
  <p><a href="https://i.stack.imgur.com/hGByX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hGByX.png" alt="enter image description here"></a></p>
  
  <p>And on click on the parent menu (<strong>Menu 1</strong>), the <strong>Sub Menu 1</strong>
   part needs to be displayed like,</p>
  
  <p>The dropdown menu listing sub menus separately in another view</p>
  
  <p><a href="https://i.stack.imgur.com/1e6I1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1e6I1.png" alt="enter image description here"></a></p>
  
  <p>So here you can look that Menu will be displayed first and on click on the menu the sub menu needs to be displayed separately on another view.</p>
  
  <p>It is okay if anyone could help me to do the same in pure bootstrap <strong>without jquery</strong>.</p>