How to stop expandable Material UI cards from opening at the same time?

I currently have two Material UI expandable cards and everything works as expected minus the fact that both cards expand at the same time.

My config file looks like:

module.exports = {
  featuredSection: [
    {
      id: 1,
      name: 'beer-image-1',
      title: 'Mango Cart',
      description:
        'A light Wheat Ale bursting with lots of fresh mango flavor and aroma, finishing crisp and refreshing.',
      malt: '2-row, Wheat',
      hops: 'Bravo',
      notes:
        'Light, refreshing Wheat Ale with lots of fresh Mango flavor and aroma.',
    },
    {
      id: 2,
      name: 'hero-image',
      title: 'test',
      description:
        'A light Wheat Ale bursting with lots of fresh mango flavor and aroma, finishing crisp and refreshing.',
      malt: 'test',
      hops: 'test',
      notes: 'test',
    },
  ],
};

My Featured.js component file looks like:

const Featured = ({ featuredSection }) => {
  const classes = useStyles();
  const [expanded, setExpanded] = useState(false);

  const handleExpandClick = (id) => {
    setExpanded(!expanded);
  };

  const card = featuredSection.map((item, i) => {
    return (
      <div key={item.id}>
        <CardWrapper>
          <Card className={classes.root}>
            <CardMedia
              className={classes.media}
              image={require(`../images/${item.name}.jpg`).default}
              title={item.title}
            />
            <CardContent>
              ...
            </CardContent>
            <CardActions disableSpacing>
              <IconButton
                style={{ color: '#f5f5f5' }}
                className={clsx(classes.expand, {
                  [classes.expandOpen]: expanded,
                })}
                onClick={(id) => handleExpandClick(item.id)}
                aria-expanded={expanded}
                aria-label='show more'>
                <ExpandMoreIcon />
              </IconButton>
            </CardActions>
            <Collapse in={expanded} timeout='auto' unmountOnExit>
              ...
            </Collapse>
          </Card>
        </CardWrapper>
      </div>
    );
  });
  return <>{card}</>;
};
export default Featured;

I’m assuming there’s something I need to change with the State or match up certain values like the config file’s object ID but I’m not exactly sure what needs to be done to be able to open each card individually. I recreated the issue here.

Answer

Issue

Your hunch is in the right direction. The issue you have is using the one single expanded state to toggle the card expansion. When any one card toggles the single state it triggers all the cards.

Solution

Use an object to store the toggled value by id, and use the current mapped element’s id to check the value.

const [expanded, setExpanded] = useState({});

const handleExpandClick = (id) => {
  setExpanded(expanded => ({
    ...expanded,
    [id]: !expanded[id],
  }));
};

...

<Collapse
  in={expanded[item.id]}
  timeout="auto"
  unmountOnExit
>
  ...
</Collapse>

Edit how-to-stop-expandable-material-ui-cards-from-opening-at-the-same-time