controlled-expansion-panel.ts

import React, { Component } from 'react';
import ExpansionPanelDetails from 'ui/core/ExpansionPanel/ExpansionPanelDetails/ExpansionPanelDetails';
import ExpansionPanelSummary from 'ui/core/ExpansionPanel/ExpansionPanelSummary/ExpansionPanelSummary';
import ExpansionPanel from 'ui/core/ExpansionPanel/ExpansionPanel';

export default class ControlledExpansionPanel extends Component {
  state = {
    expanded: null,
  };

  handleChange = (panel: string) => (expanded: boolean) => {
    this.setState({
      expanded: expanded ? panel : false,
    });
  };

  render() {
    const { expanded } = this.state;

    return (
      <React.Fragment>
        <ExpansionPanel open={expanded === 'panel1'} onChange={this.handleChange('panel1')}>
          <ExpansionPanelSummary>Expansion Panel 1</ExpansionPanelSummary>
          <ExpansionPanelDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
          </ExpansionPanelDetails>
        </ExpansionPanel>

        <ExpansionPanel open={expanded === 'panel2'} onChange={this.handleChange('panel2')}>
          <ExpansionPanelSummary>Expansion Panel 2</ExpansionPanelSummary>
          <ExpansionPanelDetails>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex,
            sit amet blandit leo lobortis eget.
          </ExpansionPanelDetails>
        </ExpansionPanel>
      </React.Fragment>
    );
  }
}