How to close drawer component from main page with menu button onclick on main page (React-js)

Question

I'm new in reactjs, I have main page

<div >
   <AppBar position="flex" style={{backgroundColor:'#1A437E'}}>
      <Toolbar>
         <IconButton edge="end" color="inherit" aria-label="menu">
               <img alt="open menu" height="57" width="50" border="0" src={ico7} />
         </IconButton>
      </Toolbar>
   </AppBar>       
   <Drower/>
</div>

And this is my Drawer

<div>
   <Drawer anchor='right' open={this.state.open}>
       <List>
           <ListItem>
               <ListItemIcon/>
           </ListItem>
       </List>
   </Drawer>
 </div>

How can I open and close the drawer?

Answer 1

Use below code for IconButton click

onClick={()=>{
    this.setState(state => ({
      open: !state.open
    }));
}}

Answer 2

To open/close the Drawer you need to toggle the value of this.state.open in your state. Like so:

<div>
   <button onClick={() => this.setState({ open: !this.state.open }))} >Open / Close Drawer </button>
   <Drawer anchor='right' open={this.state.open}>
       <List>
           <ListItem>
               <ListItemIcon/>
           </ListItem>
       </List>
   </Drawer>
 </div>