Lazy loading panel content

If you're rendering expansion panels that are all collapsed by default, you don't have to populate the ExpansionPanelDetails component up front. Instead, you can wait for the user to expand the panel—then you can make whatever API calls you need in order to render the content.

How to do it...

Let's say that you have an API function that fetches content based on an index value. For example, if the first panel is expanded, the index value will be 0. You need to be able to call this function when the panel is expanded, supplying the corresponding index value. Here's what the code looks like:

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

import ExpansionPanel...