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 O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.