React Material-UI Cookbook

How it works...

Let's break down the additions in this example that added the expandable card region. First, there's the expand style:

expand: {  marginLeft: 'auto'}

This is used to align the expand/collapse icon button to the left of the other actions. Next, let's look at the ExpandIcon component:

const ExpandIcon = ({ expanded }) =>  expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />;

This utility component is used to render either the correct icon component, depending on the expanded state of the component. Next, let's take a look at the toggleExpanded() function:

const toggleExpanded = () => {  setExpanded(!expanded);};

This handler, when called, will toggle the expanded state. This state is then passed to the ExpandIcon component, which ...