How to resolve the "Invalid hook call" error in react

user_13582061 0
Viewed 3241

I am building a basic form in react with Formik and Yup library. The form contains two fields, email and password; that should take values form user and print it in the console. Now the problem I am facing is with Hook call error, even thoug I am not using any Hook in my code!

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. ..
2. ..
3. ..

I have done studies on this error and tried every possible ways it suggests. Nothing helps yet. I am running only one verison of react and according to my knowledge I am not breaking the hook rules either. Could anyone please help detect me the issue here?

My code:

LoginForm.js 

const validationSchema = Yup.object().shape({
      email: Yup.string()
      .email("Email is not valid")
      .required("Email is required"),
      password: Yup.string()
        .min(6, "Minimum 6 characters required")
        .required("Password is required"),
    })

    class LoginForm extends React.Component {
      render() {
        return (
          <div>
            <Formik
              initialValues={{ email: "", password: "" }}
              validationSchema={validationSchema}
              onSubmit={(values) => this.props.handleFormUpdate(values)}
            >
              <Form>
                <label>
                  Email<Field type="email" name="email"></Field>
                </label>
                <ErrorMessage name="email" component="div"></ErrorMessage>
                <label>
                  Password<Field type="password" name="password"></Field>
                </label>
                <ErrorMessage name="password" component="div"></ErrorMessage>
                <button type="submit">Submit</button>
              </Form>
            </Formik>
          </div>
        );
      }
    }
    export default LoginForm;

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    };
  }
  handleFormUpdate(values) {
    console.log(values.email);
    console.log(values.password);
  }
  render() {
    return (
      <div>
        <LoginForm
          handleFormUpdate={this.handleFormUpdate.bind(this)}
        ></LoginForm>
      </div>
    );
  }
}

export default App;
react-dom yup formik react-hooks reactjs
3 Answers

this is because formik v2 is built on top of react hooks. To solve this you need to turn the class component where you are using formik to functional component. here is link for breaking change in formik.

[Edit] or you can make this work with class Component by wrapping the component with higher order Component withFormik()

user_115280640

So now that I have solved the problem. I simply needed to turn the class component into functional component, as adel mentioned above. The new construction of the LoginForm.js would be:

    const LoginForm = () => (
  <div>
    <Formik
      initialValues={{ email: "", password: "" }}
      validationSchema={validationSchema}
      onSubmit={(values) => this.props.handleFormUpdate(values)}
    >
      <Form>
        <label>
          Email<Field type="email" name="email"></Field>
        </label>
        <ErrorMessage name="email" component="div"></ErrorMessage>
        <label>
          Password<Field type="password" name="password"></Field>
        </label>
        <ErrorMessage name="password" component="div"></ErrorMessage>
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  </div>
);

And the error is gone!

user_135820610

I was able to solve this by upgrading the version of React in my project. Check the version of react and react-dom on the project and formik in the node_modules. They might be different which causes the invalid hook call error.

OR

You might just be using formik inside a class component which will not work.

user_168728990
Related