How to do it...

Let's say that your component has a state for rendering expansion panels. The panels themselves are objects in an array. Here's the code to do this:

import React, { useState, Fragment } from 'react';

import ExpansionPanel from '@material-ui/core/ExpansionPanel';
import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

export default function StatefulExpansionPanels() {
  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...'
    }
  ]);

  return (
    <Fragment>
      {panels
        .filter(panel => !panel.hidden)
        .map((panel, index) => (
          <ExpansionPanel
            key={index}
            disabled={panel.disabled}
          >
            <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
              <Typography>{panel.title}</Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
              <Typography>{panel.content}</Typography>
            </ExpansionPanelDetails>
          </ExpansionPanel>
        ))}
    </Fragment>
  );
}

When you load the screen, here's what you'll see:

Here's what the first two panels look like when they're expanded:

The third panel cannot be expanded because it's disabled.