title: React JS - Material UI ListItem (with Collapse API) onClick expands/collapse all sub list items instead of the selected one
body: <p>I'm implementing Expand/Collapse feature of List using React JS - Material UI ListItem (with Collapse API)  </p>
  
  <p>When I click on the ListItem it expands/collapse all sub list items instead of the selected one. </p>
  
  <p>Here is the sample code. Looks like I'm improperly setting the key value in one of the element, but couldn't figure it out. Can someone help me? Please let me know if the information is inadequate </p>
  
  <p>Jaffar</p>
  
  <pre><code>class CategoriesResults extends Component {
    constructor(props) {
      super(props);
      this.state = {
        open: false
      };
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      console.log("Handle Clicked....");
       this.setState(prevState =&gt; ({
         open: !prevState.open
       }));
    }
  
    render() {
      const docs = data.documents;  //this coming from a json file, please see below for the sample json
       return (
        &lt;div&gt;
          &lt;List component='nav' aria-labelledby='nested-list-subheader'&gt;
            {docs.map(doc =&gt; {
              return (
                &lt;div key={doc.Id}&gt;
                  &lt;ListItem button key={doc.Id} onClick={this.handleClick}&gt;
                    &lt;ListItemText primary={doc.Name} /&gt;
                    {this.state.open ? &lt;ExpandLess /&gt; : &lt;ExpandMore /&gt;}
                  &lt;/ListItem&gt;
                  &lt;Collapse
                    key={doc.Sheets.Id}
                    in={this.state.open}
                    timeout='auto'
                    unmountOnExit
                  &gt;
                    &lt;List component='li' disablePadding key={doc.Id}&gt;
                      {doc.Sheets.map(sheet =&gt; {
                        return (
                          &lt;ListItem button key={sheet.Id}&gt;
                            &lt;ListItemIcon&gt;
                              &lt;InsertDriveFileTwoToneIcon /&gt;
                            &lt;/ListItemIcon&gt;
                            &lt;ListItemText key={sheet.Id} primary={sheet.Title} /&gt;
                          &lt;/ListItem&gt;
                        );
                      })}
                    &lt;/List&gt;
                  &lt;/Collapse&gt;
                  &lt;Divider /&gt;
                &lt;/div&gt;
              );
            })}
          &lt;/List&gt;     
        &lt;/div&gt;
      );
    }
  }
  
  
  **Sample JSON**
  
  {
    "documents": [
      {
        "Id": 1,
        "Name": "Category 1",
        "Sheets": [
          {
            "Id": 1,
            "Title": "Title1 "
          },
          {
            "Id": 2,
            "Title": "Title 2"
          },
          {
            "Id": 3,
            "Title": "Title 3"
          }
        ]
      }
  }
  
  </code></pre>