title: Material-UI Drawer will not close and chrome shows a Warning: Unknown prop `onRequestChange` on <div> tag
body: <p>I have a material-ui navbar with a button on the left hand side, that button brings up a left hand drawer the only trouble is the drawer refuses to close on press of esc or on press of overlay.</p>
  
  <p>I am using material-ui@next so the beta build of v1 so it is possible this is a bug with the material-ui people but given that I have never used the Drawer component before I thought I would check here first.</p>
  
  <p>When I then click on the button at top left i get a drawer pop up but sadly I cannot remove it by hitting esc nor can i click on the overlay to remove it which I assumed was handled by</p>
  
  <pre><code> onRequestChange={this.handleClose}
  </code></pre>
  
  <p>in components/LeftDrawer but instead i get a warning in chrome which reads:</p>
  
  <pre><code>Warning: Unknown prop `onRequestChange` on &lt;div&gt; tag. Remove this prop from the element.
  </code></pre>
  
  <p>React strips such props but in the documentation I am seeing this being onRequestChange being used for the Drawer so I really do not know what is going on here.</p>
  
  <p>Hoping someone can point to the problem whatever it might be (hoping it is just the result of me being tired and at my wits end.</p>
  
  <p>package.json </p>
  
  <pre><code>"dependencies": {
      "babel-loader": "^7.1.1",
      "babel-preset-es2015": "^6.24.1",
      "babel-preset-react": "^6.24.1",
      "file-loader": "^0.11.2",
      "history": "^4.6.3",
      "material-ui": "^1.0.0-beta.5",
      "material-ui-icons": "^1.0.0-alpha.19",
      "react": "^15.4.0",
      "react-dom": "^15.4.0",
      "react-router": "^4.1.2",
      "react-router-dom": "^4.1.2",
      "react-tap-event-plugin": "^2.0.1"
    },
    "devDependencies": {
      "babel-core": "^6.25.0",
      "html-webpack-plugin": "^2.30.1",
      "webpack": "^3.5.4",
      "webpack-dev-server": "^2.7.1"
    }
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react'
  import ReactDom from 'react-dom'
  import App from './components/App'
  import {BrowserRouter, Route} from 'react-router-dom'
  
  var injectTapEventPlugin = require("react-tap-event-plugin");
  injectTapEventPlugin();
  
  ReactDom.render(
      &lt;div&gt;
          &lt;BrowserRouter&gt;
              &lt;Route path="/" component={App}/&gt;
          &lt;/BrowserRouter&gt;
      &lt;/div&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>components/App.js</p>
  
  <pre><code>import React from 'react'
  import FinalAppBar from './AppBar'
  
  
  export default class App extends React.Component {
      render() {
          return (
              &lt;div&gt;
                  &lt;FinalAppBar/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>components/FinalAppBar.js</p>
  
  <pre><code>// @flow weak
  
  import React from 'react';
  import AppBar from 'material-ui/AppBar';
  import PropTypes from 'prop-types';
  import LeftDrawer from './LeftDrawer'
  import Toolbar from 'material-ui/Toolbar';
  import Typography from 'material-ui/Typography';
  import Button from 'material-ui/Button';
  import IconButton from 'material-ui/IconButton';
  import MenuIcon from 'material-ui-icons/Menu';
  import { withStyles } from 'material-ui/styles';
  
  class FinalAppBar extends React.Component {
      constructor() {
          super();
          this.state = {
              open: false
          }
      }
  
      //Toggle function (open/close Drawer)
      toggleDrawer() {
          this.setState({
              open: !this.state.open
          })
      }
  
      handleClose() {
          this.setState({open: false})
      }
  
      render() {
          const classes = this.props.classes;
          return (
              &lt;div&gt;
                  &lt;AppBar position="static"&gt;
                      &lt;Toolbar&gt;
                          &lt;IconButton color="contrast" aria-label="Menu"  onClick={() =&gt; this.toggleDrawer()}&gt;
                              &lt;MenuIcon /&gt;
                          &lt;/IconButton&gt;
                          &lt;Typography type="title" color="inherit" className={classes.flex}&gt;
                              Title
                          &lt;/Typography&gt;
                          &lt;Button color="contrast"&gt;Login&lt;/Button&gt;
                      &lt;/Toolbar&gt;
                  &lt;/AppBar&gt;
                  &lt;LeftDrawer open={this.state.open}
                              handleClose={this.handleClose.bind(this)}
                              onToggleDrawer={this.toggleDrawer.bind(this)}
                  /&gt;
              &lt;/div&gt;
          )
      }
  }
  
  FinalAppBar.propTypes = {
      classes: PropTypes.object.isRequired,
  };
  
  const styles = {
      root: {
          marginTop: 30,
          width: '100%',
      },
      flex: {
          flex: 1,
      },
  };
  
  export default withStyles(styles)(FinalAppBar);
  </code></pre>
  
  <p>components/LeftDrawer</p>
  
  <pre><code>import React from 'react';
  import Drawer from 'material-ui/Drawer';
  
  export default class LeftDrawer extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {open: false};
      }
  
  
  
      handleClose() {
          this.props.handleClose();
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Drawer
                      docked={false}
                      width={600}
                      open={this.props.open}
                      onRequestChange={this.handleClose}
                  &gt;
                    &lt;li&gt;Hello cruel world&lt;/li&gt;
                  &lt;/Drawer&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>EDIT</strong>
  Ok so this is what works perfectly in the latest stable version of react:</p>
  
  <pre><code>export default class FinalAppBar extends React.Component {
  
      constructor(props) {
          super(props);
          this.state = {open: false};
  
          this.handleToggle = () =&gt; this.setState({open: !this.state.open});
  
          this.handleClose = () =&gt; this.setState({open: false});
      }
  
  
  
      render() {
          return (
              &lt;div&gt;
                  &lt;AppBar
                      title="Title"
                      iconClassNameRight="muidocs-icon-navigation-expand-more"
                      onLeftIconButtonTouchTap={this.handleToggle}
                  /&gt;
  
                      &lt;Drawer
                          docked={false}
                          width={200}
                          open={this.state.open}
                          onRequestChange={(open) =&gt; this.setState({open})}
                      &gt;
                          &lt;MenuItem onClick={this.handleClose}&gt;Menu Item&lt;/MenuItem&gt;
                          &lt;MenuItem onClick={this.handleClose}&gt;Menu Item 2&lt;/MenuItem&gt;
                      &lt;/Drawer&gt;
              &lt;/div&gt;)
      }
  }
  </code></pre>
  
  <p>Going to work on proving the answer from logan below</p>