title: TypeScript React Invalid Hook Call Error ("Error: Invalid hook call.")
body: <p>I tried asking a question earlier but realized it was a bit all over the place so no one could really understand it properly. So here's a more clarified attempt.</p>
  
  <p>I am currently working on a CRUD web project that allows the user to edit, view and create more users which is then displayed on a table.</p>
  
  <p>I have been using react-bootstrap's components so decided to use the Modal component provided. (<a href="https://react-bootstrap.netlify.com/components/modal/#modals-live" rel="nofollow noreferrer">https://react-bootstrap.netlify.com/components/modal/#modals-live</a>)</p>
  
  <p>It was successfully working without any errors when I just called and used the component within App.tsx as follows:</p>
  
  <pre><code>const App: React.FC = () =&gt; {
    const [show, setShow] = useState(false);
    const handleClose = () =&gt; setShow(false);
    const handleShow = () =&gt; setShow(true);
  
    return (
      &lt;div className="App"&gt;
    &lt;NavBar/&gt;
    &lt;Jumbotron fluid className="userJumbotron"&gt;
        &lt;Container&gt;
          &lt;h1&gt;Manage Users&lt;/h1&gt;
          &lt;Button variant="outline-dark" onClick={handleShow}&gt;Add new user&lt;/Button&gt;
            &lt;Modal show={show} onHide={handleClose}&gt;
              &lt;Modal.Header closeButton&gt;
                &lt;Modal.Title&gt;Add User&lt;/Modal.Title&gt;
              &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;&lt;NewUserForm/&gt;&lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant="secondary" onClick={handleClose}&gt;
              Close
            &lt;/Button&gt;
            &lt;Button variant="primary" onClick={handleClose}&gt;
              Save Changes
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
  </code></pre>
  
  <p>But I think realized that I'll need more than 1 modal component for my program and decided to make the modal component section into my own component that I can reuse as many times as I want and customize as I want within the App.tsx</p>
  
  <p>So I decided to make a NewModal.tsx component that has the bootstrap modal component and button pre-made meaning I'd only have to call one line () rather than a whole chunk. the NewModal.tsx code is as follows:</p>
  
  <pre><code>export default class NewModal extends Component&lt;any&gt; {
    constructor (props: any){
      super(props)
      this.state={
        show:false
      }
    }
      render() {
    const [show, setShow] = useState(false);
    const handleClose = () =&gt; setShow(false);
    const handleShow = () =&gt; setShow(true);
  
        return (
          &lt;div&gt;
  
      &lt;h1&gt;Manage Users&lt;/h1&gt;
      &lt;Button variant="outline-dark" onClick={handleShow}&gt;Add new user&lt;/Button&gt;
        &lt;Modal show={show} onHide={handleClose}&gt;
          &lt;Modal.Header closeButton&gt;
            &lt;Modal.Title&gt;Add User&lt;/Modal.Title&gt;
          &lt;/Modal.Header&gt;
          &lt;Modal.Body&gt;&lt;NewUserForm/&gt;&lt;/Modal.Body&gt;
          &lt;Modal.Footer&gt;
            &lt;Button variant="secondary" onClick={handleClose}&gt;
              Close
            &lt;/Button&gt;
            &lt;Button variant="primary" onClick={handleClose}&gt;
              Save Changes
            &lt;/Button&gt;
          &lt;/Modal.Footer&gt;
        &lt;/Modal&gt;
  &lt;/div&gt;
        );
      }
    }
  </code></pre>
  
  <p>I am getting the following error from this code.
  <a href="https://i.stack.imgur.com/3V57H.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3V57H.png" alt="enter image description here"></a></p>
  
  <p>What is the cause for this error?</p>