ReactJs nested list collapse for only one list item

Question

I am trying to make a collapse sublist using material UI and ReactJS, I have followed the examples in the material-UI list. the problem is when click on one list item to expand the other list items expands also like the image below:

this the code:

   return (
        <List component="nav"
              aria-labelledby="nested-list-subheader"
              subheader={
                  <ListSubheader component="div" id="nested-list-subheader">
                      Nested List Items
                  </ListSubheader>
              }>
            {items.map((item, index, list) => (
                <Fragment key={item.id}>
                    <ListItem button key={item.id} onClick={handleClick}>
                        <ListItemAvatar>
                            <Avatar>
                                <img className={classes.icon} src={`images/icon/${item.category || 'default'}.svg`}
                                     alt=""/>
                            </Avatar>
                        </ListItemAvatar>
                        <ListItemText primary={item.name}/>
                        {open ? <ExpandLess/> : <ExpandMore/>}
                    </ListItem>
                    <Collapse in={open} timeout="auto" unmountOnExit>
                        <List component="div" disablePadding>
                            <ListItem button className={classes.nested}>
                                <ListItemIcon>
                                    <LensIcon style={{color: changeColorStatus(item)}}/>
                                </ListItemIcon>
                                <ListItemText primary="Status"/>
                            </ListItem>
                            <ListItemSecondaryAction>
                                <IconButton onClick={(event) => onMenuClick(event.currentTarget, item.id)}>
                                    <MoreVertIcon/>
                                </IconButton>
                            </ListItemSecondaryAction>
                        </List>
                    </Collapse>
                    {index < list.length - 1 ? <Divider/> : null}
                </Fragment>
            ))}
        </List>
    );
}

  const handleClick = () => {
        setOpen(!open);
    };

Thanks in advance.

Answer 1

This is because you're using a single boolean to determine the open state of several list items. What you should do is use an int instead and assign the item.id to it.

So you need to change the handleClick event to the following:

<ListItem button key={item.id} onClick={() => handleClick(item.id)}>
...

As for the handler:

const handleClick = (itemID) => {
  setOpen(itemID);
  // or simply setState({ openItemID: itemID });
};

For your render now you will have to change the conditions.

{openItemID === item.id ? <ExpandLess/> : <ExpandMore/>}

And

<Collapse in={openItemID === item.id} timeout="auto" unmountOnExit>
...