Cannot read property 'handleReset' of undefined

Question

I am using useFormik hook in my react native project

So i try to initialize useFormik in my another component and then import it in my Signup page and use here.Here is the code below.

import React from "react";
import { Formik } from "formik";
import {
  signupValidationSchema,
} from "../../validationSchemas";
import { useFormik } from "formik";

export const SignupFormik = () => {
  const formik=useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      state: "",
      city: "",
      type: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    validationSchema: signupValidationSchema,
  });
  return formik
};

signup.js

import { SignupFormik } from "../../Tools";
import {Form} from 'formik'
export function Signup() {
  const isLoading = useSelector((state) => state.activityIndicator.isLoading);
  return isLoading ? (
    <View style={activityIndicatorStyles.container}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  ) : (
    <View style={signupStyles.screen}>
      <Form>
        <View style={signupStyles.FormWrapper}>
          <TextInput
            name="firstName"
            type="text"
            onChangeText={SignupFormik.handleChange}
            onBlur={SignupFormik.handleBlur}
            value={SignupFormik().values.firstName}
            style={signupStyles.TextInput}
          /> 
          <Button title="Submit" />
        </View>
      </Form>
    </View>
  );
}

So as soons as i import "FORM" from formik and use it i get an error

TypeError: Cannot read property 'handleReset' of undefined

This error is located at: in Form (at Signup.js:20)

Warning: Formik context is undefined, please verify you are calling useFormikContext() as child of a component.

Answer 1

You need to decide if you use hook (useFormik <- that's the hook) or component (<Form> <- that's the component). Formik prepared both. Component Form wraps the useFormik, and it requires additional parameters. That's why you have the error.

In your case, the fastest solution would be to use the hook (useFormik), so you would have to remove:

import {Form} from 'formik' // <-- remove it

and replace <Form> with <form>

I noticed that it's more popular in the react world to use hooks instead of components (of course I mean your case)

Answer 2

You have implemented SignupFormik as a function, and this function doesn't have handleChange or others methods that you use.
Actually what you probably want to implement is a custom hook:

import React from "react";
import { Formik } from "formik";
import {
  signupValidationSchema,
} from "../../validationSchemas";
import { useFormik } from "formik";

export const useSignupFormik = () => {
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      phone: "",
      state: "",
      city: "",
      type: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
    validationSchema: signupValidationSchema,
  });

  return formik;
};

And then

import { useSignupFormik } from "../../Tools";
import {Form} from 'formik'
export function Signup() {
  const signupFormik = useSignupFormik()

  const isLoading = useSelector((state) => state.activityIndicator.isLoading);
  return isLoading ? (
    <View style={activityIndicatorStyles.container}>
      <ActivityIndicator size="large" color="#0000ff" />
    </View>
  ) : (
    <View style={signupStyles.screen}>
      <Form>
        <View style={signupStyles.FormWrapper}>
          <TextInput
            name="firstName"
            type="text"
            onChangeText={signupFormik.handleChange}
            onBlur={signupFormik.handleBlur}
            value={signupFormik.values.firstName}
            style={signupStyles.TextInput}
          /> 
          <Button title="Submit" />
        </View>
      </Form>
    </View>
  );
}