React Class Component not working properly for me - reactjs

Question

I have a component of "Drawer", I am opening and closing this drawer with component state and passing this state down to the Drawer Component and Also passing a callback function that can help me to close the drawer,
Now the issue is that when ever I am trying to open that drawer, the whole ui is disappearing. Need help
here is the code
import IconButton from '#material-ui/core/IconButton';
import MenuIcon from '#material-ui/icons/Menu';
import Drawer from '../Drawer';
import Header from '../Header';
export default class LandingPage extends Component {
constructor() {
super();
this.state = {
openDrawer: false,
};
}
handleDrawer = (state) => {
this.setState({
openDrawer: state,
});
};
render() {
return (
<div className='landing-page-container'>
<div className='menu-btn'>
<IconButton
edge='start'
color='inherit'
aria-label='menu'
onClick={() => this.handleDrawer(true)}
>
<MenuIcon />
</IconButton>
</div>
<Drawer
handleDrawer={this.handleDrawer}
openDrawer={this.state.openDrawer}
/>
</div>
);
}
}
Here is Drawer
import React, { Component } from 'react';
import {
Drawer,
IconButton,
Divider,
List,
ListItem,
ListItemIcon,
Button,
ListItemText,
makeStyles,
} from '#material-ui/core';
import { withStyles } from '#material-ui/core/styles';
import {
ChevronLeft,
NoteAdd,
Person,
PersonAdd,
AttachMoney,
Build,
Settings,
} from '#material-ui/icons';
const styles = makeStyles((theme) => ({
root: {
display: 'flex',
},
drawerPaper: {
backgroundColor: theme.primary,
},
}));
export class DrawerMenu extends Component {
render() {
const { classes, openDrawer, handleDrawer } = this.props;
return (
<div className='drawer-container'>
<Drawer
variant='persistent'
anchor='left'
open={false}
classes={{
paper: classes.drawerPaper,
}}
backgroundColor='primary'
>
<div className='logo-icon'>
<div className='logo'>Logo</div>
<div className='collapse-icon'>
<IconButton onClick={() => handleDrawer(false)}>
<ChevronLeft />
</IconButton>
</div>
</div>
<Divider />
<div className='drawer-menu-container'>
<div className='drawer-menu'>
<List>
{[
'Booking',
'Positions',
'User Management',
'Trading',
'Instruments',
].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>
{index === 0 && <NoteAdd />}
{index === 1 && <Person />}
{index === 2 && <PersonAdd />}
{index === 3 && <AttachMoney />}
{index === 4 && <Build />}
</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<Divider />
</div>
<div className='drawer-action-button'>
<div className='setting-logout'>
<div className='setting'>
<Settings />
</div>
<div className='logout'>
<Button variant='contained' color='primary'>
Logout
</Button>
</div>
</div>
</div>
</div>
</Drawer>
</div>
);
}
}
export default withStyles(styles, { withTheme: true })(DrawerMenu);

Answer 1

Your problem could be related to the fact that your Drawer is not on a Fragment. Try to modify your Drawer component code like:
import React, { Component, Fragment } from 'react'; //<-- import Fragment
...
export class DrawerMenu extends Component {
render() {
<div className='drawer-container'>
<Fragment>
<Drawer
variant='persistent'
anchor='left'
open={false}
classes={{
paper: classes.drawerPaper,
}}
backgroundColor='primary'
>
...
</Drawer>
</Fragment>
</div>
};
}
This should solve your problem.