Блог

Итак , я много борюсь, потому что я новичок в реагировании, и я еще не знаю, как управлять несколькими состояниями

Я пытаюсь открыть только один коллапс за раз

На данный момент у меня есть два компонента, один только для вставки данных в меню ниже и один для управления всем кодом, я хочу, чтобы мой код масштабировался, поэтому, когда я добавляю узел, я создаю новый элемент, сопоставляя массив.

Итак, моя проблема заключается в следующем: как несколько элементов сворачивания не открываются одновременно?

Вот пример кода [я не могу вставить исходный код, потому что он закрытый]

 const  menu={[
                    {
                        id: 0,
                        label: 'Dashboard',
                        icon: <DashboardIcon />,
                        nested:false,
                       

                    },
                    {
                        id: 1,
                        label: 'Products',
                        icon: <ViewListIcon />,
                        nested:false,
                     
                    },
                    {
                    
                    {
                        id: 3,
                        label: 'Grid',
                        icon: <GrindOnIcon />,  
                        nested:true,
                        nestedItems: [
                            { id:1,
                              icon: <ClassIcon/>,
                              label: 'Class',
                               
                            },
                        ]
                    },
                        ]

                    },
                   
                ]}
function Menu (){

  const [collapsed, setCollapsed] = useState([]);

    const handleClick = (id) => {
       ?
    } 

  return(  {

                        menu.map((obj, index) => (

                            <>
                                {
                                    obj.nested === false amp;amp;
                                    <ListItem className={classes.list} button key={index} >
                                        <Link className={classes.listLink} to={obj.url}>
                                            <ListItemIcon className={classes.icon}> {obj.icon}</ListItemIcon>
                                            <ListItemText className={classes.label} secondary={obj.label}></ListItemText>
                                        </Link>
                                    </ListItem>

                                }
                                {
                                    obj.nested === true amp;amp;
                                    <> 
                                   
                                        <ListItem className={clsx(classes.list, classes.listLink)} button key={index} 
                                        onClick={} >
                                            <ListItemIcon className={classes.icon}> {obj.icon}</ListItemIcon>
                                            <ListItemText className={classes.label} secondary={obj.label}></ListItemText>

                                            { collapsed ? <ExpandLessRoundedIcon className={classes.icon} /> : <ExpandMoreRoundedIcon className={classes.icon} />}
                                        </ListItem>
                                            <Collapse   in={?} timeout="auto" unmountOnExit>
                                            {obj.nestedItems.map((item,i) => (
                                                <List disablePadding >
                                                    <ListItem button className={classes.nested} key={item.id}>
                                                        <Link className={classes.listLink} to={item.url}>
                                                            <ListItemIcon className={classes.icon}> {item.icon}</ListItemIcon>
                                                            <ListItemText className={classes.label} secondary={item.label}></ListItemText>
                                                        </Link>
                                                    </ListItem>
                                                </List>
                                                ))}
                                            </Collapse>
                                        
                                    </>
                                }

                            </>


                        ))}
)

 

Я видел много решений, использующих компонент класса, но мне действительно нужно решение с использованием крючков и масштабируемой
помощи plz