title: Toggle sidebar menu with Reactjs
body: <p>I am currently working on a react project for learning. My aim is to design a sidebar with toggle menu. I am halfway on it with the help from many of you and have designed it, but getting a small problem. If I click on the list to toggle the menu items, instead of single item, all items expand at once. I am unable to resolve it with my current configuration. Please help me, my code is as below,</p>
  <pre><code>import React, {useCallback, useState} from &quot;react&quot;;
  import {List} from &quot;@material-ui/core&quot;;
  import ListItem from &quot;@material-ui/core/ListItem&quot;;
  import {Link, useRouteMatch} from &quot;react-router-dom&quot;;
  import {Container, Row, Col, Collapse} from &quot;react-bootstrap&quot;;
  import '../Home/myStyle.css'
  import {FontAwesomeIcon} from &quot;@fortawesome/react-fontawesome&quot;;
  
  
  
  let {url} = useRouteMatch;
  export const menu = [
    {
      label: 'Technical Analysis',
      items: [
        {
          title: 'The Dow Theory',
          href: `${url}/thedowtheory`
        },
        {
          title: 'Charts &amp; Chart Patterns',
          href: `${url}/charts`
        },
        {
          title: 'Trends &amp; Trendlines',
          href: `${url}/trends`
        },
        {
          title: 'Support &amp; Resistance',
          href: `${url}/support`
        }
      ]
    },
    {
      label: 'Fundamental Analysis',
      items: [
        {
          title: 'Link',
          href: `${url}/thedowtheory`
        },
        {
          title: 'Link',
          href: `${url}/charts`
        },
        {
          title: 'Link',
          href: `${url}/trends`
        },
        {
          title: 'Link',
          href: `${url}/support`
        }
      ]
    }
  ]
  
  
  export const Sidebar = () =&gt; {
    const [open, setOpen] = useState(false);
    const clickHandler = useCallback(
      () =&gt; setOpen(open =&gt; !open),
      [setOpen]
    );
  
    return (
      &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col&gt;
            {menu.map((item, index) =&gt;
              &lt;ul key={index}
                  className=&quot;p-0&quot;
              &gt;
                &lt;div onClick={clickHandler}
                     aria-controls={`menu${index}`}
                     aria-expanded={open}
                &gt;
                  &lt;Link style={{textDecoration: &quot;none&quot;, color: &quot;black&quot;}}&gt;
                    {open ? '-' + ' ' + item.label : '+' + ' ' + item.label}
                  &lt;/Link&gt;
                  {item.items.map((item, index) =&gt;
                    &lt;Collapse in={open}&gt;
                      &lt;div id={`menu${index}`}&gt;
                        &lt;ul className=&quot;list-unstyled border-left p-1 pl-3&quot;&gt;
                          &lt;li&gt;
                            &lt;Link key={index}
                                  to={item.href}
                                  style={{textDecoration: &quot;none&quot;}}
                            &gt;
                              {item.title}
                            &lt;/Link&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                    &lt;/Collapse&gt;
                  )}
                &lt;/div&gt;
                &lt;hr/&gt;
              &lt;/ul&gt;
            )}
          &lt;/Col&gt;
  
          &lt;Col xs={7} className=&quot;border-left&quot;&gt;Content&lt;/Col&gt;
          &lt;Col className=&quot;border-left&quot;&gt;Sidebar&lt;/Col&gt;
        &lt;/Row&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>