React Material-UI Cookbook

There's more...

You can also use state to control whether or not a panel is expanded. For example, you can use ExpansionPanel components to create an accordion widget—there's always one panel open, and opening another panel closes anything that's open.

The first step is to add an expanded state to determine which panel is open at any given time:

const [expanded, setExpanded] = useState(0);const [panels] = useState([  {    title: 'First Panel Title',    content: 'First panel content...'  },  {    title: 'Second Panel Title',    content: 'Second panel content...'  },  {    title: 'Third Panel Title',    content: 'Third panel content...'  },  {    title: 'Fourth Panel Title',    content: 'Fourth panel content...'  }]);

The expanded state defaults to 0, meaning that the first ...