title: React Hook "useState" cannot be called in a class component
body: <p>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  react-hooks/rules-of-hooks</p>
  <p>here is my code :</p>
  <pre><code>import './App.css';
  import { Row, Col, Container } from 'react-bootstrap';
  import ListGame from './components/ListGame';
  import Konten from './components/Konten';
  import NavbarComponents from './components/NavbarComponents';
  import Sidebar from './components/Sidebar';
  import { GiHamburgerMenu } from 'react-icons/gi';
  import { useState } from 'react';
  import React, { Component } from 'react'
  
  export default class App extends Component {
    
    render() {
      const [ showNav, setShowNav] = useState(false)
      return (
        &lt;div className='App'&gt;
        &lt;navbar&gt;&lt;NavbarComponents /&gt;&lt;/navbar&gt;
        &lt;header&gt;
          &lt;GiHamburgerMenu onClick={() =&gt; setShowNav(!showNav)}/&gt;
        &lt;/header&gt;
        &lt;Sidebar show={showNav}/&gt;
        &lt;div className=&quot;mt-3&quot;&gt;
            &lt;Konten show={showNav}/&gt;
        &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>