ExpansionPanel.js

import React, { Component, cloneElement, Children } from "react";
class ExpansionPanel extends Component {
  state = {
    show: false
  };

  toggleContent = () => {
    this.setState(prevState => ({
      show: !prevState.show
    }));
  };

  render() {
    const childrenWithNewProps = Children.map(
      this.props.children,
      (child, i) => {
        // doesn't display the content if `show` is false
        if (child.type.name === "expansionPanelContent" && !this.state.show) {
          return null;
        }
        // map the toggle event on the title
        if (child.type.name === "expansionPanelTitle") {
          return cloneElement(child, {
            onClick: this.toggleContent
          });
        }
        return cloneElement(child);
      }
    );
    return <div>{childrenWithNewProps}</div>;
  }
}
export default ExpansionPanel;