TypeError: undefined is not an object (evaluating '(i === 0 ? obj : resVal)[pathArray[i]]')

[brahimsouidene1994]

when i try to type something in the input text this error appears i'm using "formik": "^2.2.9", and "react-native-formik": "^1.7.8" any solution plz

[SaddamNeyssuh]

I have the same issue any solution ?

[pokhiii]

Can anybody explain what is happening here? Facing the same issue:

TypeError: undefined is not an object (evaluating '(i === 0 ? obj : resVal)[pathArray[i]]')

This error is located at:
    in Formik (at ParentComonent.js:166)
    in RCTView (at View.js:32)
    in View (at ScrollView.js:1674)
    in RCTScrollView (at ScrollView.js:1792)
    in ScrollView (at ScrollView.js:1818)
    in ScrollView (at FormCantainer.js:15)
    in RCTView (at View.js:32)
    in View (at KeyboardAvoidingView.js:215)
    in KeyboardAvoidingView (at FormCantainer.js:14)
    in FormCantainer (at TagTree.js:165)
    in TagTree (created by Connect(TagTree))
    in Connect(TagTree) (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (at View.js:32)
    in View (created by CardContainer)
    in RCTView (at View.js:32)
    in View (created by CardContainer)
    in RCTView (at View.js:32)
    in View
    in CardSheet (created by Card)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (at View.js:32)
    in View (at createAnimatedComponent.js:242)
    in AnimatedComponent (at createAnimatedComponent.js:295)
    in AnimatedComponentWrapper (created by Card)
    in RCTView (at View.js:32)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RCTView (at View.js:32)
    in View (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RCTView (at View.js:32)
    in View (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in CardStack
    in KeyboardManager (created by SafeAreaInsetsContext)
    in RNCSafeAreaProvider (at SafeAreaContext.tsx:76)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by StackView)
    in GestureHandlerRootView (at GestureHandlerRootView.android.tsx:26)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackView)
    in StackView
    in Unknown (created by Navigator)
    in Navigator (created by NavigationContainer)
    in NavigationContainer (at sankalptaru-mobile/index.js:18)
    in Provider (at sankalptaru-mobile/index.js:17)
    in appRootComponent (at renderApplication.js:50)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:92)
    in RCTView (at View.js:32)
    in View (at AppContainer.js:119)
    in AppContainer (at renderApplication.js:43)
    in SankalpTaruHUGE(RootComponent) (at renderApplication.js:60)

My code

class ParentComponent {
  render() {
    return (
      <FormCantainer>
        <Formik
          onSubmit={(values) => this.onFormSubmit(values)}
          validate={(values) => this.validateForm(values)}
        >
          {(props) => this.renderForm(props)}
        </Formik>
      </FormCantainer>
      );
  }

  renderForm() {
    return (<Field component={CustomTextInput} name="userId" label="User ID" keyboardType={'numeric'} required={true} />);
  }
}

class CustomTextInput {
  render() {
    const { field } = this.props;
    return (
      <TextInput
        onChangeText={(text) => form.setFieldValue(field.name, text)}
        { ...this.props } />
    );
  }
}

[pokhiii]

Fixed it!!! Seems like handleChange requires initialValues to work properly. Here is the updated code:

class ParentComponent {
  render() {
    return (
      <FormCantainer>
        <Formik
          initialValues={{}} // Only this line was needed to fix the issue!
          onSubmit={(values) => this.onFormSubmit(values)}
          validate={(values) => this.validateForm(values)}
        >
          {(props) => this.renderForm(props)}
        </Formik>
      </FormCantainer>
      );
  }

  renderForm() {
    return (<Field component={CustomTextInput} name="userId" label="User ID" keyboardType={'numeric'} required={true} />);
  }
}