title: React Hook "useState" cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function
body: <p>I'm new in React Frontend developing. I'm trying to add a temporary drawer to my Material-UI NavBar. I've add a drawer in my code:</p>
  <pre><code>class Navbar extends Component {
      render() {
          const { authenticated } = this.props;
          const [open, setOpen] = useState(false);
          const handleDrawer = () =&gt;{
             setOpen(true)
          }
          return (
              &lt;AppBar position=&quot;fixed&quot;&gt;
                  &lt;Toolbar className=&quot;nav-container&quot;&gt;
                      {authenticated ? (
                          &lt;Fragment&gt;
                              &lt;IconButton edge=&quot;start&quot; onClick={handleDrawer} &gt;
                                  &lt;Menu/&gt;
                              &lt;/IconButton&gt;
                              &lt;Drawer
                                  anchor='left'
                                  open={open}
                                  onClose={()=&gt; setOpen(false)}
                                  &gt;
                                      &lt;h3&gt; Drawer&lt;/h3&gt;
                              &lt;/Drawer&gt;
                              &lt;NewPost/&gt;
                              &lt;Link to=&quot;/&quot;&gt;
                                  &lt;MyButton tip=&quot;Home&quot;&gt;
                                      &lt;HomeIcon color = &quot;disabled&quot;/&gt;
                                  &lt;/MyButton&gt;
                              &lt;/Link&gt;
                              &lt;Link to=&quot;/chats&quot;&gt;
                                  &lt;MyButton tip=&quot;Chats&quot;&gt;
                                      &lt;ChatIcon color = &quot;disabled&quot;/&gt;
                                  &lt;/MyButton&gt;
                              &lt;/Link&gt;
                              &lt;Notifications /&gt;
                          &lt;/Fragment&gt;
                          
  
                      ):(
                          &lt;Fragment&gt;
                              &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/login&quot;&gt;Login&lt;/Button&gt;
                              &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/signup&quot;&gt;Singup&lt;/Button&gt;
                              &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/&quot;&gt;Home&lt;/Button&gt;
                              {/* &lt;Button color=&quot;inherit&quot; component={Link} to=&quot;/user&quot;&gt;Profile&lt;/Button&gt;*/}
                          &lt;/Fragment&gt;
                      )}
                  &lt;/Toolbar&gt;
              &lt;/AppBar&gt;
  
              
          )
      }
  }
  
  Navbar.propTypes = {
      authenticated:  PropTypes.bool.isRequired
  }
  
  const mapStateToProps = state =&gt;({
      authenticated: state.user.authenticated
  })
  
  export default connect(mapStateToProps)(Navbar)
  </code></pre>
  <p>But this error appeared:</p>
  <pre><code>React Hook &quot;useState&quot; cannot be called in a class component. React Hooks must be called in a React function component or a custom React Hook function
  </code></pre>
  <p>So, I've create a constructor to handle this (before render):</p>
  <pre><code>constructor(props) {
      super(props);
      this.state = {
        open: false
      };
    }
  </code></pre>
  <p>And when I want to change the state, I've use:</p>
  <pre><code>this.setState({ open: true })
  </code></pre>
  <p>But, when I triggered the Drawer (clicking the button),It does not open. What can I do?</p>