How to create collapse expand list in react

Question

I try to create a collapse and expand side menu in React (v 16.5) with the following criteria -

On page load first item (Circulars) will be in expanded

Answer 1

To do that I would use React.useState, since its a small state to control and to animate I would use CSS:

The component would look like this:

function SidebarNavs() {
  const [activeItem, setActiveItem] = React.useState(1);

  return (
    

      

        
          Sidebar Content Here
        

        
          Sidebar Content Here
        

        
          Work Orders
        
      
    
  );
}

function SidebarItem({ title, children, setActiveItem, activeItem, index }) {
  const expanded = activeItem === index;
  const cls = "sidebar-nav-menu-item " + (expanded ? "item-active" : "");
  return (
    

      

        
{title}
        

           setActiveItem(index)}
          >
            View more info
          
        
        

          
        

      

      
{children}
    

  );
}

The CSS would look like this:

.sidebar-nav-menu-item {
  border: 1px solid #CCC;
  margin-bottom: 20px;
}
.sidebar-nav-menu-item .sidebar-nav-menu-item-body {
  overflow: hidden;
  max-height: 0;
  transition: all linear 0.5s;
}

.sidebar-nav-menu-item.item-active .sidebar-nav-menu-item-body {
  max-height: 100px;
  transition: all linear 0.5s 0.3s;
}