У каждого имеющегося у вас контейнера-карты должна быть своя собственная функция разворачивания / свертывания.
Вы можете создать новый компонент, который оборачивает конкретную c карту (например, <CardWrapper />)
, и этот компонент будет иметь свой собственное состояние (extendedName, setExpandedName) и т. д.
Быстрое и грязное решение может выглядеть следующим образом:
const CardWrapper = (dataExample) => {
const dispatch = useDispatch();
[expandedName, setExpandedName] = useState(false);
const handleExpandClickName = () => {
setExpandedName(!expandedName)
};
return (
<div className={classes.root}>
<Grid>
<Card>
<CardActions disableSpacing>
<IconButton
key={dataExample.key}
className={clsx(classes.expand, {
[classes.expandOpen]: expandedName,
})}
onClick={() => dispatch(handleExpandClickName)}
aria-expanded={expandedName}
aria-label="show more"
>
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={expandedName} timeout="auto" unmountOnExit>
<CardContent>
<Typography paragraph>Test</Typography>
</CardContent>
</Collapse>
</Card>
</Grid>
</div>);
}
А внутри вашего кода вы должны использовать что-то вроде этого:
const ServiceAreaTile = () => {
const psOverviewSA = useSelector((state) => state.psOverviewSA);
return psOverviewSA.map((dataExample) => {
return (<CardWrapper dataExample={dataExample} />);
}
}
Таким образом, состояние раскрытия сохраняется внутри каждого CardWrapper, и между ними нет коллизий.