title: Why am I getting "TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function" error when using reactjs hooks?
body: <p>I'm trying to use this component straight from the Material Ui (Simple Menu <a href="https://material-ui.com/demos/menus/#menus" rel="nofollow noreferrer">https://material-ui.com/demos/menus/#menus</a>) docs in order to make a menu appear.  However, I'm getting <code>TypeError: react__WEBPACK_IMPORTED_MODULE_1___default.a.useState is not a function</code> error with my current attempt below.  I tried:</p>
  
  <ul>
  <li><code>import React, { useState } from 'react';</code> and then got rid of <code>React</code> inside <code>const [anchorEl, setAnchorEl] = React.useState(null);</code> to make it look like: <code>const [anchorEl, setAnchorEl] = useState(null);</code></li>
  <li>I also tried replacing <code>null</code> with a number but still got same error.</li>
  </ul>
  
  <p>Note: Another attempt installed the right packages and made my <code>package.json</code> file look like this (<a href="https://stackoverflow.com/questions/53024307/typeerror-dispatcher-usestate-is-not-a-function-when-using-react-hooks">TypeError dispatcher.useState is not a function when using React Hooks</a>):</p>
  
  <pre><code>{
    "name": "speedy-react",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@material-ui/core": "^3.9.0",
      "@material-ui/icons": "^3.0.2",
      "classnames": "^2.2.6",
      "node-sass": "^4.11.0",
      "prop-types": "^15.6.2",
      "react": "16.7.0-alpha.0",
      "react-dom": "16.7.0-alpha.0",
      "react-test-renderer": "16.7.0-alpha.0",
      "react-scripts": "2.1.3"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ]
  }
  </code></pre>
  
  <p>Screen shot of error:</p>
  
  <p><a href="https://i.stack.imgur.com/1jaQq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1jaQq.png" alt="enter image description here"></a></p>
  
  <p>What am I doing wrong and how can I fix it?</p>
  
  <pre><code>import React from 'react';
  import Button from '@material-ui/core/Button';
  import Menu from '@material-ui/core/Menu';
  import MenuItem from '@material-ui/core/MenuItem';
  
  const SimpleMenu = () =&gt; {
      const [anchorEl, setAnchorEl] = React.useState(null);
  
      function handleClick(event) {
          setAnchorEl(event.currentTarget);
      }
  
      function handleClose() {
          setAnchorEl(null);
      }
  
      return (
          &lt;div&gt;
              &lt;Button
                  aria-owns={anchorEl ? 'simple-menu' : undefined}
                  aria-haspopup="true"
                  onClick={handleClick}
              &gt;
                  Open Menu
              &lt;/Button&gt;
              &lt;Menu id="simple-menu" anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}&gt;
                  &lt;MenuItem onClick={handleClose}&gt;Profile&lt;/MenuItem&gt;
                  &lt;MenuItem onClick={handleClose}&gt;My account&lt;/MenuItem&gt;
                  &lt;MenuItem onClick={handleClose}&gt;Logout&lt;/MenuItem&gt;
              &lt;/Menu&gt;
          &lt;/div&gt;
      );
  };
  
  export default SimpleMenu;
  </code></pre>