title: React show toggle showing all children
body: <p>Im using react.js and im trying to have a <code>&lt;ul&gt;</code> with each <code>&lt;li&gt;</code> having a child <code>&lt;ul&gt;</code>. When an icon in the <code>&lt;li&gt;</code> is clicked Im trying to show its child <code>&lt;ul&gt;</code>. The current way I have it its showing ALL the <code>&lt;li&gt;</code>'s children instead of just its own corresponding child.</p>
  <pre><code>    const FooterMenu = (props) =&gt; {
  
      const { menuName } = props;
      const [menu, setMenu] = useState([]);
      const [showDetails, setShowDetails] = useState(false);
  
      useEffect(() =&gt; {
          if (menuName) {
              axios.get(``)
                  .then(response =&gt; {
                     setMenu(response.data);
                  }).catch(error =&gt; {
                      console.log('[Page] error', error); //TO-DO: remove before prod deployment
                      //TO-DO: add redirect to error page
                  })
          }
          
      }, [menuName]);
  
      return (
          &lt;ul&gt;
              { menu.map(row =&gt; {
                  return (
                      &lt;li className=&quot;footer-menu-icon footer-menu-item&quot;&gt;
                          &lt;i className={`fas showSubLinks ${row.SubMenus.length &gt;= 1 ? (showDetails ? 'fa-minus' : 'fa-plus') : 'fa-angle-right'}`} onClick={() =&gt; setShowDetails(() =&gt; !showDetails)}&gt;&lt;/i&gt;
                          &lt;a href={row.MenuLink} target={row.LinkTarget ? row.LinkTarget : '_self'}&gt;{row.MenuText}&lt;/a&gt;
                          {row.SubMenus.length &gt;= 1 &amp;&amp; showDetails  ? (
                              &lt;ul className=&quot;subMenu-items&quot;&gt;
                                  {
                                      row.SubMenus.map(row =&gt; {
                                          return (
                                              &lt;li&gt;
                                                  &lt;a href={row.MenuLink} target={(row.LinkTarget) ? row.LinkTarget : '_self'}&gt;{row.MenuText}&lt;/a&gt;
                                              &lt;/li&gt;
                                          )
                                      })
                                  }
                              &lt;/ul&gt;
                          ) : (
                              &lt;&gt;&lt;/&gt;
                          )}
                      &lt;/li&gt;
                  )
              })}
          &lt;/ul&gt;
      );
  };
  
  export default FooterMenu;
  </code></pre>
  <p>I know the <code>showDetails</code> is to blame but cant seem to wrap my head around how to do this</p>
  <p><a href="https://i.stack.imgur.com/wCrQi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wCrQi.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/9zHbr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9zHbr.png" alt="enter image description here" /></a></p>