Material UI - Drawer does not open - reactjs

Question

I have a react app with Material-UI 1.2.
Although the state is properly updated, the drawer does not open close.
I have also correctly applied the bind on onLeftIconButtonTouchTap.
Here is my implementation of the TemporaryDrawer :
// .. imports
const styles = {
list: {
width: 250,
},
fullList: {
width: 'auto',
},
menuButton: {
marginLeft: 12,
marginRight: 36,
},
};
class TemporaryDrawer extends React.Component {
render() {
const { classes, toggleDrawer, isOpen } = this.props;
const sideList = (
<div className={classes.list}>
<List>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
</List>
</div>
);
console.log(' isOpen ' + isOpen);
return (
<div>
<IconButton className={classes.menuButton} color="inherit" onClick={toggleDrawer}>
<MenuIcon />
</IconButton>
<Drawer open={isOpen} onClose={toggleDrawer}>
<div
tabIndex={0}
role="button"
onClick={toggleDrawer}
onKeyDown={toggleDrawer}
>
{sideList}
</div>
</Drawer>
</div>
);
}
}
TemporaryDrawer.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(TemporaryDrawer);
used in this MenuAppBar.js
// ... imports
const styles = {
root: {
flexGrow: 1,
},
flex: {
flex: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
};
class MenuAppBar extends React.Component {
state = {
auth: true,
drawerOpen: false,
};
handleMenu = () => {
this.setState({ drawerOpen: !this.state.drawerOpen });
};
render() {
const { classes } = this.props;
const { drawerOpen } = this.state;
console.log(' state ' + this.state.drawerOpen);
return (
<div className={classes.root}>
<AppBar position="static" onLeftIconButtonTouchTap={this.handleMenu.bind(this)}>
<Toolbar>
<TemporaryDrawer isOpen={drawerOpen} toggleDrawer={this.handleMenu} />
</Toolbar>
</AppBar>
</div>
);
}
}
MenuAppBar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(MenuAppBar);
package.json
{
"name": "find-swim",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/codemod": "^1.1.0",
"#material-ui/core": "^1.2.0",
"#material-ui/icons": "^1.1.0",
"firebase": "^4.8.0",
"material-ui": "^0.19.4",
"material-ui-autocomplete-google-places": "^2.2.0",
"material-ui-places": "^1.1.7",
"mui-places-autocomplete": "^2.0.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-ga": "^2.4.1",
"react-google-button": "^0.4.0",
"react-google-maps": "^9.2.2",
"react-places-autocomplete": "^5.4.3",
"react-redux": "^5.0.6",
"react-redux-firebase": "^2.0.0-beta.16",
"react-redux-form": "^1.16.5",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.0.16",
"react-tap-event-plugin": "^3.0.2",
"recompose": "^0.26.0",
"redux": "^3.7.2",
"redux-devtools": "^3.4.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "set GENERATE_SOURCEMAP=false && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "firebase deploy"
},
"devDependencies": {
"redux-devtools-extension": "^2.13.2"
}
}

Answer 1

it s crazy but the issue was with the combination:
"#material-ui/core": "^1.2.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
As soon as I ve updated my dependencies to those of Ramil in his codesandbox, it worked.
"#material-ui/core": "1.2.3",
"react": "^16.3.0",
"react-dom": "^16.3.0",
I hope this helps someone..

Answer 2

I don't know where you got this onLeftIconButtonTouchTap={this.handleMenu.bind(this)}
But what you can do is:
<AppBar position="static">
<IconButton
className={classes.menuButton}
color="inherit"
aria-label="Menu"
onClick={this.handleMenu.bind(this)}
>
<MenuIcon />
</IconButton>
<Toolbar>
<TemporaryDrawer
isOpen={drawerOpen}
toggleDrawer={this.handleMenu}
/>
</Toolbar>
</AppBar>
Edit: I tried your code in sandbox. Apparently, nothing is wrong with your code. https://codesandbox.io/s/pk9921kkw0