Set MUI Collapse component to "collapsed" by default

user_14536000 0
Viewed 1923

I'm making a React/Next/MUI project, and I wonder how i could set the MUI Collapse element to collapsed by default instead of having it opened (which could be horrible for large navigations). Here's the code :

const [open, setOpen] = React.useState(true);
const handleClick = () => {
      setOpen(!open);
    }; 

<ListItem button onClick={handleClick}>
 <ListItemText primary="Menu"/>
</ListItem>
    
<Collapse in={open} timeout="auto" unmountOnExit>
 <List component="div" disablePadding>
  <ListItem button>
   <ListItemIcon>
    </ListItemIcon>
     <ListItemText primary="Whatever" />
  </ListItem>
 </List>
</Collapse>

It might be something quite simple, but I'm not familiar with MUI API... If you need further details, let me know ! Thanks for the help and the great community !

collapse material-ui next.js reactjs javascript
1 Answers

You are using <Collapse in={open} timeout="auto" unmountOnExit> setting open to true which by default open the Collapse component. So set open to false

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