title: How can i create a multiple nested list
body: <p>so i am trying to create a list, whereby a list is displaying many items, and two of the items are expandable, and expanding them shows more items(subitems). I have managed to display the list, and the sub-lists, however, clicking either one of the expandable items, expands both items and not just the single one i clicked.</p>
  <p>So firstly, i have seperated the listItems as a data structure where i can retrieve them. This is the list Items:</p>
  <pre><code>// Skills list in the About Page
  export const listItems = [
  {
      listText: 'Html',
      listIcon: &lt;SendIcon/&gt;
  },
  {
      listText: 'CSS',
      listIcon: &lt;DraftsIcon /&gt;
  },
  {
      listText: 'JavaScript',
      listIcon: &lt;InboxIcon /&gt;
  },
  {
      listText: 'React',
      listIcon: &lt;SendIcon/&gt;,
      expan: true,
      // SubItems
      firstText:'React-Router',
      secondText:'React-Navigation',
      thirdText:'React-Native',
  },
  {
      listText: 'Database',
      listIcon: &lt;DraftsIcon /&gt;,
      expan: true,
      // SubItems
      firstText:'FireBase',
      secondText:'SQL',
  },
  {
      listText: 'ReactJs',
      listIcon: &lt;DraftsIcon /&gt;
  },
  {
      listText: 'ReactJs',
      listIcon: &lt;DraftsIcon /&gt;
  }]
  </code></pre>
  <p>This is the code where i am trying to implement the list:</p>
  <pre><code>import React, { Fragment } from 'react'
  import Styles from './Styles'
  
  // ListItems
  import List from '@material-ui/core/List';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
  import ExpandLess from '@material-ui/icons/ExpandLess';
  import ExpandMore from '@material-ui/icons/ExpandMore';
  import StarBorder from '@material-ui/icons/StarBorder';
  import Collapse from '@material-ui/core/Collapse';
  import {listItems} from './ListItems'
  
  
  const AboutSkills = () =&gt; {
  const classes = Styles()
  
  const [open, setOpen] = React.useState(false);
  const handleClick = () =&gt; {
    setOpen(!open);
  };
  
  const outputList = () =&gt; (
      &lt;&gt;
          &lt;List
              style={{color:'white'}}
              component=&quot;nav&quot;
              className={classes.root}
          &gt;
              { //Map through the ListItems and...
              listItems.map((item, index) =&gt; {
                  // if expandable items exist, expand them
                  if(item.expan) 
                  { 
                      {/* Use fragment instad of &lt;&gt;&lt;/&gt; because key attribute is required */}
                      return &lt;Fragment key={index}&gt;
                                  &lt;ListItem button onClick={handleClick} className={classes.aboutList}&gt;
                                      &lt;ListItemIcon className={classes.aboutIcon}&gt;
                                          {item.listIcon}
                                      &lt;/ListItemIcon&gt;
                                      &lt;ListItemText primary={item.listText} /&gt;
                                      {open ? &lt;ExpandLess /&gt; : &lt;ExpandMore /&gt;}
                                  &lt;/ListItem&gt;
                                  
                                  &lt;Collapse in={open} timeout=&quot;auto&quot; unmountOnExit&gt;
                                      
                                      &lt;List component=&quot;div&quot; disablePadding&gt;
                                          &lt;ListItem button className={classes.nested}&gt;
                                              &lt;ListItemIcon&gt;
                                                  &lt;StarBorder /&gt;
                                              &lt;/ListItemIcon&gt;
                                              &lt;ListItemText classes={{primary:classes.expanText}}             
                                                 primary={item.firstText} /&gt;
                                          &lt;/ListItem&gt;
                                              {/* {console.log(item.secondText)} */}
                                          {   item.secondText //if seconditem exists...
                                              ? &lt;ListItem button className={classes.nested}&gt;
                                                      &lt;ListItemIcon&gt;
                                                      &lt;StarBorder /&gt;
                                                      &lt;/ListItemIcon&gt;
                                                      &lt;ListItemText classes= 
                                              {{primary:classes.expanText}} primary={item.secondText} /&gt;
                                                  &lt;/ListItem&gt;
                                                  : console.log('No Third Item')}
  
                                              {   item.thirdText //if seconditem exists...
                                              ? &lt;ListItem button className={classes.nested}&gt;
                                                      &lt;ListItemIcon&gt;
                                                      &lt;StarBorder /&gt;
                                                      &lt;/ListItemIcon&gt;
                                                      &lt;ListItemText classes= 
                                               {{primary:classes.expanText}} primary={item.thirdText} /&gt;
                                                  &lt;/ListItem&gt;
                                                  : console.log('No Third Item')} 
  
                                      &lt;/List&gt;
  
                                  &lt;/Collapse&gt;
                              &lt;/Fragment&gt;
                  } else {
                      return &lt;ListItem button className={classes.aboutList} key={index}&gt;
                                  &lt;ListItemIcon className={classes.aboutIcon}&gt;
                                      {item.listIcon}
                                  &lt;/ListItemIcon&gt;
                                  &lt;ListItemText classes={{primary:classes.unExpanText}} primary= 
                                   {item.listText} /&gt;
                              &lt;/ListItem&gt;
                  }    
              })}    
          &lt;/List&gt;
      &lt;/&gt;
  )
  
  return (
      outputList()
      )
  }
  
  export default AboutSkills
  </code></pre>