React Material-UI Cookbook

How it works...

Let's start with the fetchPanelContent() API function:

const fetchPanelContent = index =>  new Promise(resolve =>    setTimeout(      () =>        resolve(          [            'First panel content...',            'Second panel content...',            'Third panel content...',            'Fourth panel content...'          ][index]        ),      1000    )  );

Since this is just a mock, it returns a promise directly. It uses setTimeout() to simulate latency, similar to what you would experience using a real API. The promise resolves with the string value that's looked up from an array, based on the index argument.

Next, let's look at the onChange handler function that's called when ExpansionPanel expands:

const onChange = index => (e) => {  if (!panels[index].content) { fetchPanelContent(index).then(content ...