Access Formik's values outside of component | React

Question

Some info

I am using Formik for my project and I have my setup looking like this:

|-MenuModal
|--MenuEdit
|---MenuEditForm

Where MenuModal is the parent to MenuEdit and MenuEditForm. The component MenuEditForm is responsible for returning the Formik form, but I am calling the submit in it's parent MenuModal, which laters runs the submit function in MenuEdit via React's refs. Messy? Yup!

My problem

Right now I am trying to use state and callback functions to get the Formiks values from MenuEditForm to MenuEdit. But since I am not using Formiks own onSubmit:

    <Formik
        initialValues={menu}
        validationSchema={validationSchema}
        onSubmit={values => console.log('values', values)} // 'values' is undefined
        ...

My values will be undefined and I can't make my submit function go through.

So I wonder how I can access my values in MenuEditForm so I later can pass it up to MenuEdit and complete my submit function.

Thanks for reading.

Answer 1

To access values outside of the formik component, you can do this with hooks:

      const formRef = useRef();

      return (
        <Formik
          ...
          innerRef={formRef}
        >
        ...
      </Formik>

Then, can access values using formRef.current.values anywhere outside of the component.

Answer 2

Since formik passes value to onChangeText we can save it in useState for dynamic updates

  onChangeText={(value: string) => {
      handleChange('name')(value);
      setName(value);
  }}