Invalid hook call React help

1

Hello everyone, I am trying to use the react-hook-form in my app but it is giving me the following error.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

The thing that is confusing me is that all the common issues on the documentation provided don’t seem to apply to me. Has anyone here used React-hook-form before?

import React from "react";

import {useForm}  from "react-hook-form";

export default function Contact() {
  
    const { handleSubmit, register, errors } = useForm();
    
  
  const onSubmit = (data) => {
    console.log(data);
  };
  return (
    <div className="contactmain">
      <h1 className="contactme">Contact Me</h1>
      <form id="contact-form" method="POST" onSubmit={this.handleSubmit(onSubmit)}>
        <div className="form-group">
          <label htmlFor="name">
            <h3>Name</h3>
          </label>
          <input type="text" className="form-control" />
        </div>
        //snipped form for space
      </form>
    </div>
  );
}

If you need to see the full code:


The hook is being used in the “Contact” component. Under src => components => Contact.
Thank you in advance for your assistance.

2

Probably because of this line this.handleSubmit, it should be handleSubmit

handleSubmit is just a value from the useForm hook, not a method in your Contact function.

3

That looks like it was a typo on my part. I removed the this and it is still giving me the same error.

4

You are also missing the ref prop in the input.

<input ref={register} />

I am not familiar with that library though, but try it and see if it works

5

I had no gotten to the register part yet. I had just added the handlesubmit() and it gave me this error. I’ve been debugging ever since

6

It works for me on a fresh install of the repo code (after fixing about a million missing dependencies).

I’d suggest you wipe the node_modules folder and package-lock.json file, run npm install, reinstall all the missing dependencies until your app compiles (and please commit package.json and push it afterward, pretty please). Now check it again, it should work.

BTW it is a React warning, not saying it can’t have been triggered by react-hook-form, but check the docs anyway.

7

Thank you! I have been trying in vain to fix my dependency problem. I have deleted my node modules and deleted the package-lock, however when I install npm again it reinstalls everything that I deleted before. I can’t figure out how to clear it.
I did try npm cache clear, I am thinking of reformatting my hard drive as a last resort.
And I will commit my package.json!

8

That is what npm install does. It goes through all the dependencies in package.json and installs them.

Or do you mean it is installing other dependencies that you do not have in package.json?

Reformatting your hard drive sounds a bit overkill.

9

I am just going to start all over. My code setup and everything. Since when I started I had no idea what I was doing and messed up a few things in config. Now that I know a solid 3% of what I’m doing I want to set up a better environment.
Thanks for your help!