Styjun

I am building a ReactJS app using Google's Material-UI.

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.

Here is the class that is being mapped in the parent component:

The expandByDefault boolean is passed from the parent class.

class SearchResults extends React.Component 
 render () 
 const classes = this.props;
 const batchAndContents = this.props;
 const expandByDefault = this.props;
 return (
 <div>
 <ExpansionPanel defaultExpanded=expandByDefault >
 <ExpansionPanelSummary>
 <Typography className=classes.heading>Box batchAndContents.sequenceCode</Typography>
 </ExpansionPanelSummary>
 <ExpansionPanelDetails>
 <SearchResultsTable contents=batchAndContents.contents/>
 </ExpansionPanelDetails>
 </ExpansionPanel>
 </div>
 )
 

Here is the render method for the parent class:
You can see in SearchResults, my custom class, I pass a prop named expandByDefault.

render () 
 return (
 <div>
 . . . . .
 . . . . .
 . . . . .
 <Grid container spacing=24 style=padding: 24>
 this.state.searchResults.map((searchResult) => (
 <Grid item key=searchResult.sequenceCode+searchResult.state xs=12>
 <SearchResults batchAndContents=searchResult expandByDefault=this.state.lastSearchType === "ContentBarcode"/>
 </Grid>
 ))
 </Grid>
 </div>
 )
 

I've tried several variations to get this to work, and I can't seem to understand what I'm missing.

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.

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.

I appreciate any guidance.

The defaultExpanded property only defines the default state of the component -- ie, whether or not to expand the panel when it is first rendered. Changes to this value later will not affect whether the panel is currently expanded or not.

To cause the panel to expand or collapse in response to changes in your app, you need to use the expanded property. From the docs:

If true, expands the panel, otherwise collapse it. Setting this prop enables control over the panel.

The problem here is that the keys that are on the <Grid item ... /> elements in the <Grid container /> parent view are not changing.

When a search is executed with a different type, the same data is being displayed, just displayed differently.

From my understanding, if react sees the same key with the same data, it doesn't need to re-render, even if there are states being passed as props to the children. In my case states are being passed as props to children in a <Grid item ... />.

As a resolution, I append the type of search to the key. So now when the search type changes, the key that holds the result does as well, and the children of the <Grid item ... /> are triggered to be re-rendered.

Sorry for not the best explanation, I have some practical experience with ReactJS, but I can not speak about it that well from an "under the hood" point of view.