title: How to resolve the "Invalid hook call" error in react
body: <p>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!</p>
  
  <pre><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. ..
  </code></pre>
  
  <p>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?</p>
  
  <p>My code:</p>
  
  <p>LoginForm.js   </p>
  
  <pre><code>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 (
            &lt;div&gt;
              &lt;Formik
                initialValues={{ email: "", password: "" }}
                validationSchema={validationSchema}
                onSubmit={(values) =&gt; this.props.handleFormUpdate(values)}
              &gt;
                &lt;Form&gt;
                  &lt;label&gt;
                    Email&lt;Field type="email" name="email"&gt;&lt;/Field&gt;
                  &lt;/label&gt;
                  &lt;ErrorMessage name="email" component="div"&gt;&lt;/ErrorMessage&gt;
                  &lt;label&gt;
                    Password&lt;Field type="password" name="password"&gt;&lt;/Field&gt;
                  &lt;/label&gt;
                  &lt;ErrorMessage name="password" component="div"&gt;&lt;/ErrorMessage&gt;
                  &lt;button type="submit"&gt;Submit&lt;/button&gt;
                &lt;/Form&gt;
              &lt;/Formik&gt;
            &lt;/div&gt;
          );
        }
      }
      export default LoginForm;
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>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 (
        &lt;div&gt;
          &lt;LoginForm
            handleFormUpdate={this.handleFormUpdate.bind(this)}
          &gt;&lt;/LoginForm&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>