Stateful expansion panels

You can use component the state to control every aspect of your expansion panels. For example, each panel could be represented as an object in an array, where each object has panel title and panel content properties. There are other aspects you can control, such as visibility and disabled panels.

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...