How it works...

The state defines everything about expansion panels. This includes the panel title, the panel content that's displayed when the panel is expanded, the disabled property, and whether or not the panel is hidden:

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 disabled property marks the panel as disabled. This means that the user can see the panel title, but it cannot be expanded. It's also visually marked as not being expandable. The hidden property ensures that the panel ...

Get React Material-UI Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.