title: Tracking which According is currently expanded and limiting it a single one
body: <p>I'm attempting to keep track of the last accordion element that's been expanded and collapsing everything else, so that only one is expanded at any time.</p>
  <p>When the onChange is fired I keep track of which one it was in the 'currentSelection' and then only the ones that match have their expanded set to true.  Nothing ever expands, however!</p>
  <p>I'm new: do I have a simple bug here or a fundamental misunderstanding of state?</p>
  <pre><code>class Effects extends Component 
  {
      constructor(props)
      {
          super(props);
          this.state = {
              effects: [],
              isLoaded: false,
              currentSelection: &quot;&quot;
          }
      }
      
      componentDidMount()
      {
          console.log(&quot;Mount&quot;);
          fetch(hostURL + &quot;getEffectList&quot;)
              .then(res =&gt; res.json())
              .then(json =&gt; {
                 this.setState({
                  isLoaded: true,
                  effects: json.Effects,
                 }) 
              });
      }
      
      render() 
      {
          var { isLoaded, effects,  currentSelection } = this.state;
          
          if (!isLoaded){
              return &lt;div&gt; Data is loading...&lt;/div&gt;
          }
          else {
              return (
                  &lt;div&gt;
                      &lt;h2&gt;Available Effects&lt;/h2&gt;
                      { 
                          effects.map(effect =&gt; (
                              &lt;Accordion
                                  id={effect.name}  
                                  onChange={()=&gt;{currentSelection = effect.name; }}
                                  expanded={currentSelection === effect.name }&gt;
                                  &lt;AccordionSummary 
                                      aria-controls=&quot;panel1a-content&quot;
                                      expandIcon={&lt;ExpandMore/&gt;}
                                      id=&quot;panel1a-header&quot;
                                      onClick={ (event) =&gt; { event.stopPropagation(); }} &gt;
                                      &lt;Switch checked={effect.enabled} onClick={ (event) =&gt; { event.stopPropagation(); }} /&gt;
                                      &lt;Typography&gt;{effect.name}&lt;/Typography&gt;
                                  &lt;/AccordionSummary&gt;
                                  &lt;AccordionDetails  &gt;
                                      &lt;Typography&gt;
                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
                                          malesuada lacus ex, sit amet blandit leo lobortis eget.
                                      &lt;/Typography&gt;
                                  &lt;/AccordionDetails&gt;
                              &lt;/Accordion&gt;
                          ))};
                  &lt;/div&gt;
              );
          }
      }
  }
  
  export default Effects;
  </code></pre>