Actualmente tengo dos tarjetas expandibles Material UI y todo funciona como se esperaba menos el hecho de que ambas tarjetas se expanden al mismo tiempo.

Mi archivo de configuración se parece a:

 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', }, ], };

Mi archivo de componente Featured.js se ve así:

 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;

Supongo que hay algo que debo cambiar con el estado o hacer coincidir ciertos valores, como la identificación del objeto del archivo de configuración, pero no estoy exactamente seguro de lo que se debe hacer para poder abrir cada tarjeta individualmente. Recreé el problema aquí .