title: React submenus from an array
body: <p>So i've made this navbar:</p>
  <p><a href="https://i.stack.imgur.com/FlwzZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FlwzZ.jpg" alt="Looks like this" /></a></p>
  <p>the navbar gets parameters such as URL, parentId from an array.
  All countys in the array have a non unique Id called parent which is equal to '1'.
  All towns have a non unique Id called parent which ranges from 2-22.
  In the case below Blekinge and Dalarna are countys (parent='1'), and their corresponding towns comes after in the array parent='2' are blekinge county towns and parent='3' are dalarna county towns. Below is a snippet of the array of countys and towns in sweden.</p>
  <pre><code>const orter = [{
          &quot;id&quot;: &quot;2&quot;,
          &quot;rubrik&quot;: &quot;Blekinge&quot;,
          &quot;url&quot;: &quot;blekinge&quot;,
          &quot;parent&quot;: &quot;1&quot;
      },
      {
          &quot;id&quot;: &quot;23&quot;,
          &quot;rubrik&quot;: &quot;Karlshamn&quot;,
          &quot;url&quot;: &quot;blekinge/karlshamn&quot;,
          &quot;parent&quot;: &quot;2&quot;
      },
      {
          &quot;id&quot;: &quot;24&quot;,
          &quot;rubrik&quot;: &quot;Karlskrona&quot;,
          &quot;url&quot;: &quot;blekinge/karlskrona&quot;,
          &quot;parent&quot;: &quot;2&quot;
      },
      {
          &quot;id&quot;: &quot;25&quot;,
          &quot;rubrik&quot;: &quot;Olofström&quot;,
          &quot;url&quot;: &quot;blekinge/olofstrom&quot;,
          &quot;parent&quot;: &quot;2&quot;
      },
      {
          &quot;id&quot;: &quot;26&quot;,
          &quot;rubrik&quot;: &quot;Ronneby&quot;,
          &quot;url&quot;: &quot;blekinge/ronneby&quot;,
          &quot;parent&quot;: &quot;2&quot;
      },
      {
          &quot;id&quot;: &quot;27&quot;,
          &quot;rubrik&quot;: &quot;Sölvesborg&quot;,
          &quot;url&quot;: &quot;blekinge/solvesborg&quot;,
          &quot;parent&quot;: &quot;2&quot;
      },
      {
          &quot;id&quot;: &quot;3&quot;,
          &quot;rubrik&quot;: &quot;Dalarna&quot;,
          &quot;url&quot;: &quot;dalarna&quot;,
          &quot;parent&quot;: &quot;1&quot;
      },
      {
          &quot;id&quot;: &quot;28&quot;,
          &quot;rubrik&quot;: &quot;Älvdalen&quot;,
          &quot;url&quot;: &quot;dalarna/alvdalen&quot;,
          &quot;parent&quot;: &quot;3&quot;
      },
      {
          &quot;id&quot;: &quot;29&quot;,
          &quot;rubrik&quot;: &quot;Avesta&quot;,
          &quot;url&quot;: &quot;dalarna/avesta&quot;,
          &quot;parent&quot;: &quot;3&quot;
      },
      {
          &quot;id&quot;: &quot;318&quot;,
          &quot;rubrik&quot;: &quot;Borlänge&quot;,
          &quot;url&quot;: &quot;dalarna/borlange&quot;,
          &quot;parent&quot;: &quot;3&quot;
      }]
  export default orter
  </code></pre>
  <p>I want the sub-menu for each county to be populated with the corresponding towns.
  But I cant get this to work, what happens is instead that each county and town gets their own nav-link item and sub-menu item. I have tried mixing arround with if statements but I just cant wrap my head around it.</p>
  <pre><code>import React, {useState} from 'react'
  import './nav.css'
  import { Link } from 'react-router-dom'
  import orter from '../../data/orter'
  
  const Nav = () =&gt; {
      const [toggle, setToggle] = useState(false)
      
      const ort = orter.map((obj, key) =&gt;{
          return (
                  &lt;ul className=&quot;nav-links&quot;&gt;
                          &lt;li 
                          parentid={obj.parent}
                          key={key}
                          &gt;
                          &lt;Link
                           to={obj.url}&gt;
                              &lt;i class='knapp'&gt;#&lt;/i&gt;
                              &lt;span className=&quot;link_name&quot;&gt;{obj.rubrik}&lt;/span&gt;
                              &lt;i className=&quot;arrow&quot; onClick={()=&gt; setToggle(!toggle)}&gt;N&lt;/i&gt;
                          &lt;/Link&gt;
                          {toggle &amp;&amp;(
                              &lt;ul className=&quot;sub-menu&quot;&gt;
                              &lt;li parentid={obj.parent}&gt;
                                  &lt;Link
                                  to={obj.url}&gt;{obj.rubrik}&lt;/Link&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          )}
                      &lt;/li&gt;
                  &lt;/ul&gt;
          )
      })
      return (
          &lt;div className='sidebar'&gt;
              {ort}
          &lt;/div&gt;
      )
  }
  
  export default Nav
  </code></pre>
  <p>And here is the css</p>
  <pre><code>*{
      margin:0;
      padding:0;
      box-sizing: border-box;
      font-family: 'Courier New', Courier, monospace;
  }
  
  .sidebar{
      position: relative;
      top:0;
      left:0;
      height: 100%;
      width:260px;
      background: #ea5526;
  }
  .arrow{
      cursor: pointer;
  }
  .sidebar .logo-details{
      height:60px;
      width: 100%;
      display: flex;
      align-items: center;
  }
  
  .sidebar .logo-details i{
      font-size: 30px;
      color:#fff;
  }
  
  .sidebar .logo-details .logo_name
  {
      font-size: 30px;
      color:#fff;
      font-weight: 600;
  }
  
  .sidebar .nav-links{
      background: #ea5526;
      height: 100%;
      padding-top: 30px;
  }
  
  .sidebar .nav-links li{
      position: relative;
      list-style: none;
      transition: all 0.4s ease;
  }
  
  .sidebar .nav-links li:hover{
      background: #f9712d;
  }
  
  .sidebar .nav-links li i{
      height: 50px;
      min-width: 78px;
      text-align: center;
      line-height: 50px;
      color:#fff;
  }
  
  .sidebar .nav-links li a{
      display: flex;
      align-items: center;
      text-decoration: none;
  }
  
  .sidebar .nav-links li a .link_name{
      font-size: 18px;
      font-weight: 400;
      color: #fff;
  }
  
  
  .sidebar .nav-links li .sub-menu{
      padding: 6px 6px 14px 80px;
      margin-top: -10px;
      background-color: #f9712d;
  }
  
  .sidebar .nav-links li.showMenu .sub-menu{
      display:block;
  }
  .sidebar .nav-links li .sub-menu a{
      color:#fff;
      font-size:15px;
      padding: 5px 0;
  }
  
  .sidebar.close .nav-links li .sub-menu{
      position: absolute;
      left:100%;
      top: 0;
      margin-top: 0;
      padding: 10px 20px;
  }
  </code></pre>