My current task involves mapping over an array of data to render multiple controlled accordions. Each accordion should open/close individually upon clicking, but I'm facing an issue where the icons for all accordions are changing when I interact with one. I understand that this is happening because of how I've mapped the components, but I'm unsure of how to assign a unique id to each accordion's icon element. Here is a snippet of my code:
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionDetails from '@mui/material/AccordionDetails';
import AccordionSummary from '@mui/material/AccordionSummary';
import Typography from '@mui/material/Typography';
import ControlPointIcon from '@mui/icons-material/ControlPoint';
import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
const data = [{left: "general settings", right:"this is an accoridon", text :"blabla", id:"pannel-1"}, {left:"users", "right": "you'r not an user", text:"allela eegf aa ", id:"pannel-2"}]
export default function ControlledAccordions() {
const [expanded, setExpanded] = React.useState<string | false>(false);
const expandicon = expanded ? <RemoveCircleOutlineIcon /> : <ControlPointIcon />
const handleChange =
(panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
setExpanded(isExpanded ? panel : false);
};
return (
<div>
{data.map((item) =>
<Accordion expanded={expanded === item?.id} onChange={handleChange(item.id)}>
<AccordionSummary
expandIcon={expandicon}
id={item.id}
>
<Typography sx={{ width: '33%', flexShrink: 0 }}>
{item.left}
</Typography>
<Typography sx={{ color: 'text.secondary' }}>{item.right}</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
{item.text}
</Typography>
</AccordionDetails>
</Accordion>)}
</div>
);
}
I am seeking guidance on how to uniquely identify and control each accordion icon.