title: React Material UI Multiple Collapse
body: <p>Currently my list all have collapses but they are linked to one state for "open" so if I open one list, all the other lists open.
  What is the best way to keep the collapses separate from each other without having a lot of states for each list.</p>
  
  <p>EDIT: The app is going through an infinite loop</p>
  
  <p><strong>App.tsx</strong></p>
  
  <pre><code>interface IState {
  error: any,
  intro: any,
  threads: any[],
  title: any,
  }
  
  export default class App extends React.Component&lt;{}, IState&gt; {
      constructor (props : any) {
          super (props);
  
          this.state = {
              error: "",
              intro: "Welcome to RedQuick",
              threads: [],
              title: ""
          };
  
          this.getRedditPost = this.getRedditPost.bind(this)
          this.handleClick = this.handleClick.bind(this)
      }
  
      public getRedditPost = async (e : any) =&gt; {
          e.preventDefault();
  
          const subreddit = e.target.elements.subreddit.value;
          const redditAPI = await fetch('https://www.reddit.com/r/'+ subreddit +'.json');
          const data = await redditAPI.json();
  
          console.log(data);
  
          if (data.kind) {
              this.setState({
                  error: undefined,
                  intro: undefined,
                  threads: data.data.children,
                  title: data.data.children[0].data.subreddit.toUpperCase()
              });
          } else {
              this.setState({
                  error: "Please enter a valid subreddit name",
                  intro: undefined,
                  threads: [],
                  title: undefined
              });
          }
      }
  
      public handleClick = (index : any)  =&gt; {
          this.setState({ [index]: true });
      }
  
      public render() {
          return (
              &lt;div&gt;
                  &lt;Header 
                      getRedditPost={this.getRedditPost}
                  /&gt;
                  &lt;p className="app__intro"&gt;{this.state.intro}&lt;/p&gt;
                  {
                      this.state.error === "" &amp;&amp; this.state.title.length &gt; 0 ?
                      &lt;LinearProgress /&gt;:
                      &lt;ThreadList 
                          error={this.state.error}
                          handleClick={this.handleClick}
                          threads={this.state.threads}
                          title={this.state.title}
                      /&gt;
                  }   
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>Threadlist.tsx</strong></p>
  
  <pre><code>&lt;div className="threadlist__subreddit_threadlist"&gt;
      &lt;List&gt;
          { props.threads.map((thread : any, index : any) =&gt; 
              &lt;div key={index} className="threadlist__subreddit_thread"&gt;
                  &lt;Divider /&gt;
                  &lt;ListItem button={true} onClick={props.handleClick(index)}/* component="a" href={thread.data.url}*/ &gt;
                      &lt;ListItemText primary={thread.data.title} secondary={&lt;p&gt;&lt;b&gt;Author: &lt;/b&gt;{thread.data.author}&lt;/p&gt;} /&gt;
                      {props[index] ? &lt;ExpandLess /&gt; : &lt;ExpandMore /&gt;}
                  &lt;/ListItem&gt;
                  &lt;Collapse in={props[index]} timeout="auto" unmountOnExit={true}&gt;
                      &lt;p&gt;POOP&lt;/p&gt;
                  &lt;/Collapse&gt;
                  &lt;Divider /&gt;
              &lt;/div&gt;
          ) }
      &lt;/List&gt; 
  &lt;/div&gt;
  </code></pre>