title: Google Material's ExpansionPanel for ReactJS not expanding by default
body: <p>I am building a ReactJS app using Google's Material-UI.</p>
  
  <p>I have the following child class that is displayed in a Grid, after a search has been submitted. Depending if the search is one type or another, the ExpansionPanel inside this child class should be expanded or not expanded.  </p>
  
  <p>Here is the class that is being mapped in the parent component:</p>
  
  <p>The expandByDefault boolean is passed from the parent class. </p>
  
  <pre><code>class SearchResults extends React.Component {
      render () {
          const { classes } = this.props;
          const { batchAndContents } = this.props;
          const { expandByDefault } = this.props;
          return (
              &lt;div&gt;
                  &lt;ExpansionPanel defaultExpanded={expandByDefault} &gt;
                      &lt;ExpansionPanelSummary&gt;
                      &lt;Typography className={classes.heading}&gt;Box {batchAndContents.sequenceCode}&lt;/Typography&gt;
                      &lt;/ExpansionPanelSummary&gt;
                      &lt;ExpansionPanelDetails&gt;
                          &lt;SearchResultsTable contents={batchAndContents.contents}/&gt;
                      &lt;/ExpansionPanelDetails&gt;
                  &lt;/ExpansionPanel&gt;
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>Here is the render method for the parent class:
  You can see in SearchResults, my custom class, I pass a prop named expandByDefault.</p>
  
  <pre><code>render () {
          return (
              &lt;div&gt;
                . . . . .
                . . . . .
                . . . . .
                &lt;Grid container spacing={24} style={{padding: 24}}&gt;
                  {this.state.searchResults.map((searchResult) =&gt; (
                      &lt;Grid item key={searchResult.sequenceCode+searchResult.state}  xs={12}&gt;
                          &lt;SearchResults batchAndContents={searchResult} expandByDefault={this.state.lastSearchType === "ContentBarcode"}/&gt;
                      &lt;/Grid&gt;
                  ))}
              &lt;/Grid&gt;
              &lt;/div&gt;
          )
      }
  </code></pre>
  
  <p>I've tried several variations to get this to work, and I can't seem to understand what I'm missing. </p>
  
  <p>What's interesting is that when I initially perform a search, and the ExpansionPanel's property defaultExpanded is set to true, it works. However if I don't refresh the page and perform another search with a different type, the results don't collapse back down when the type should cause that behavior. </p>
  
  <p>Same behavior occurs if I initially perform the search and the ExpansionPanel defaultExpanded is set to false. It expands on click, and is default collapsed, however, when changing the search type to something that should cause default expanded panels, it doesn't work.</p>
  
  <p>I appreciate any guidance. </p>