TypeScript React Invalid Hook Call Error ("Error: Invalid hook call.")

Question

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.

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.

I have been using react-bootstrap's components so decided to use the Modal component provided. (https://react-bootstrap.netlify.com/components/modal/#modals-live)

It was successfully working without any errors when I just called and used the component within App.tsx as follows:

const App: React.FC = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div className="App">
  <NavBar/>
  <Jumbotron fluid className="userJumbotron">
      <Container>
        <h1>Manage Users</h1>
        <Button variant="outline-dark" onClick={handleShow}>Add new user</Button>
          <Modal show={show} onHide={handleClose}>
            <Modal.Header closeButton>
              <Modal.Title>Add User</Modal.Title>
            </Modal.Header>
        <Modal.Body><NewUserForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>

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

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:

export default class NewModal extends Component<any> {
  constructor (props: any){
    super(props)
    this.state={
      show:false
    }
  }
    render() {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

      return (
        <div>

    <h1>Manage Users</h1>
    <Button variant="outline-dark" onClick={handleShow}>Add new user</Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Add User</Modal.Title>
        </Modal.Header>
        <Modal.Body><NewUserForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
</div>
      );
    }
  }

I am getting the following error from this code.

What is the cause for this error?

@marzelin How would I be able to use this component in any other module then? as I need that line for the modal to work — zadders
– zadders, Commented Jan 22, 2020 at 14:17

Evaldas Buinauskas · Accepted Answer · 2020-01-22 14:26:39Z

4

You can't use hooks inside class components, you need to change it to be a function based component, which can look something like this:

const NewModal = () => {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <div>
      <h1>Manage Users</h1>
      <Button variant="outline-dark" onClick={handleShow}>
        Add new user
      </Button>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Add User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <NewUserForm />
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  );
}

export default NewModal;

edited Jan 22, 2020 at 14:26

Evaldas Buinauskas

14.2k11 gold badges63 silver badges119 bronze badges

answered Jan 22, 2020 at 14:20

Clarity

10.9k2 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

zadders Over a year ago

Oh I see, I shall read up more about function based components as I forgot about them. This has helped and fixed my issue though! Thank you very much

Collectives™ on Stack Overflow

TypeScript React Invalid Hook Call Error ("Error: Invalid hook call.")

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related