当我单击一个按钮时，它同时打开所有按钮

Question

When I click on the post button it opens all buttons like media and user.i tried to define state function but when i click one button all buttons are open simultaneously.

this problem i am facing

My code are here

export default function ListItem() {

const [open, setOpen] = React.useState(false);


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


return (
    <div>
        <List
            sx={{ width: '100%', maxWidth: 360, bgcolor: 'background.paper' }}
            component="nav"
            aria-labelledby="nested-list-subheader"
        >
            {/* dashbord */}
            <ListItemButton component="a" href="#simple-list">
                <ListItemIcon>
                    <DashboardTwoToneIcon />
                </ListItemIcon>
                <ListItemText primary="DashBoard" />
            </ListItemButton>

            {/* post */}
            <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                    <PostAddTwoToneIcon />
                </ListItemIcon>
                <ListItemText primary="Post" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="New post" component="a" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="All posts" />
                    </ListItemButton>
                </List>
            </Collapse>

            {/* Media */}
            <ListItemButton onClick={handleClick}>
                <ListItemIcon>
                    <SubscriptionsTwoToneIcon />
                </ListItemIcon>
                <ListItemText primary="Media" />
                {open ? <ExpandLess /> : <ExpandMore />}
            </ListItemButton>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <List component="div" disablePadding>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="All Media" component="a" />
                    </ListItemButton>
                    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
                        <ListItemText primary="Add New Media" />
                    </ListItemButton>
                </List>
            </Collapse>

Answer 1

You call function setOpen on a click on any object, however setOpen seems to change the state of a global variable that is used to determine whether the contents should be shown or not. Try to set a unique variable as open state for every button and only change this variable with a function in onClick

Answer 2

You are using a single boolean state for all of them. I suggest storing the open status of each item/element you want to toggle in an object and check if the specific item/element is currently toggled open.

const [open, setOpen] = React.useState({});

const handleClick = (id) => () => {
  setOpen(open => ({
    ...open,
    [id]: !open[id],
  }));
};

...

<ListItemButton onClick={handleClick("post")}> // <-- pass id
  <ListItemIcon>
    <PostAddTwoToneIcon />
  </ListItemIcon>
  <ListItemText primary="Post" />
  {open["post"] ? <ExpandLess /> : <ExpandMore />} // <-- check by id
</ListItemButton>
<Collapse
  in={open["post"]} // <-- check by id
  timeout="auto"
  unmountOnExit
>
  <List component="div" disablePadding>
    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
      <ListItemText primary="New post" component="a" />
    </ListItemButton>
    <ListItemButton sx={{ pl: 4 }} component="a" href="#">
      <ListItemText primary="All posts" />
    </ListItemButton>
  </List>
</Collapse>

Apply same for other buttons and collapsables but using specific unique keys.