title: Target specific child inside React loop with refs and state onClick
body: <p>I've got a mobile nav menu with a couple dropdown menus:</p>
  
  <pre><code>/* nav structure */
  /about
      /portfolio
  /services
      /service-1
      /service-2
  contact
  etc..
  </code></pre>
  
  <p>I'm creating this menu dynamically with a loop in my render function.</p>
  
  <p>I've set up a <em>state variable</em> to assign a class to the <em>active</em> dropdown menu. I'm using an <code>onClick</code> event/attribute on the trigger element (a small arrow image) to apply an <em>active class</em> to the respective dropdown menu. Kinda...</p>
  
  <pre><code>const myNavMenu = () =&gt; {
  
      const [isSubMenuOpen, toggleSubMenu] = useState(false)
  
      return (
          &lt;nav id="mainNav"&gt;
              &lt;ul&gt; 
                  {navItems.items.map((item, i) =&gt; (
                    &lt;li key={i} className={
                      (item.child_items) !== null ? 'nav-item has-child-items' : 'nav-item'}&gt;
                      &lt;Link to={item.slug}&gt;{item.title}&lt;/Link&gt;
                      {(item.child_items === null) ? null :
                        &lt;&gt;
                          &lt;img className="arrow down" src={arrowDownImg} onClick={() =&gt; toggleSubMenu(!isSubMenuOpen)} /&gt;
                          {printSubMenus(item)}
                        &lt;/&gt;
                      }
                   &lt;/li&gt;
                  ))}
               &lt;/ul&gt;
             &lt;/nav&gt;
           )
         }
  
      /**
         * Prints nav item children two levels deep 
         * @param {Obj} item a navigation item that has sub items
         */
    function printSubMenus(item) {
      return (
        &lt;ul className={(isSubMenuOpen.current) ? "sub-menu sub-menu-open" : "sub-menu"}&gt;
          {item.child_items.map( (childItem, i) =&gt; (
            &lt;li className="nav-item" key={i}&gt;
              &lt;Link to={childItem.slug}&gt;{childItem.title}&lt;/Link&gt;
              {(childItem.child_items === null) ? null : 
              &lt;&gt;
                &lt;ul className="sub-sub-menu"&gt;
                  {childItem.child_items.map( (subItem, i) =&gt; (
                    &lt;li className="sub-nav-item" key={i}&gt;
                    &lt;img className="arrow right" src={arrowRight} alt={''} /&gt;
                      &lt;Link to={subItem.slug}&gt;{subItem.title}&lt;/Link&gt;
                    &lt;/li&gt;
                  ))}
                &lt;/ul&gt;
              &lt;/&gt;
              }  
            &lt;/li&gt;
          ))}
        &lt;/ul&gt;
      )
    }
  
  }
  </code></pre>
  
  <p>*<code>&lt;Link&gt;</code> is a <a href="https://www.gatsbyjs.org/" rel="nofollow noreferrer">Gatsby</a> helper component that replaces <code>&lt;a&gt;</code> tags.</p>
  
  <p><strong>The issue</strong> is that when I click my trigger, the active class is being applied to both (all) sub-menus.</p>
  
  <p><em>I need to insert some sort of index (or Ref) on each trigger and connect it to their respective dropdowns but I'm not quite sure how to implement this.</em></p>
  
  <p>I was reading up on <code>useRef()</code> for use inside of function components. I believe that's the tool I need but I'm not sure how to implement it in a loop scenario. I haven't been able to find a good example online yet.</p>
  
  <p>Thanks,</p>
  
  <p><em>p.s. my functions and loops are pretty convoluted. Very open to refactoring suggestions!</em></p>