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.

Jordan Daniels · Accepted Answer · 2020-03-04 22:30:08Z

64

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.

answered Mar 4, 2020 at 22:30

Jordan Daniels

5,3241 gold badge23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abraham L Over a year ago

Any idea why the innerRef prop is nowhere to be found in the docs?

0xedb Over a year ago

@AbrahamL can be found here

Drazen Bjelovuk Over a year ago

@AbrahamL That's for Field.

rule_it_subir Over a year ago

This works, I can use handleChange in useEffect.

Sehrish Waheed · Accepted Answer · 2021-08-08 07:41:52Z

3

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

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

answered Aug 8, 2021 at 7:41

Sehrish Waheed

1,59518 silver badges22 bronze badges

Comments

Nathan Barel · Accepted Answer · 2022-06-02 14:02:16Z

In my case (using older version of react 16.5) the "innerRef" prop does not exist so I used the regular "ref" and it worked.

Here an ex with class component:

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };
        this.formRef = React.createRef();
    }

Before using it you should check that the Formik class is accessible because it is null when the page is rendering :

getFormikValues = () => {
    const formikValues = this.formRef.current && this.formRef.current.state && 
    this.formRef.current.state.values
    return formikValues
}

or if you have a support for optional chaining

(see More supported alternative to optional chaining in React?)

just use:

   getFormikValues = () => {
      const formikValues = this.formRef.current?.state?.values
       return formikValues
   }

  doSomethingWithFormikValues = () => {
    const formikValues = this.getFormikValues()
    return
  }

  return (
    <Formik
      ref={this.formRef}
    >
    ...
  </Formik>

Dani Vijay · Accepted Answer · 2019-03-19 13:52:48Z

0

You can simply pass a function to receive the values from child component.

Eg:

MenuModal:

const MenuModal = () => {
  const [values, setvalues] = useState();
  return (
    ...
      <MenuEdit values={values} onFormSubmit={(values) => setvalues(values)} />
    ...
  );
}

MenuEdit:

const MenuEdit = ({values, onFormSubmit}) => {
    // do something with values
    return (
      ...
      <MenuEditForm onFormSubmit={onFormSubmit} />
      ...
    )
  ...  
}

MenuEditForm:

const MenuEditForm = ({onFormSubmit}) => (
  ...
  <Formik
    initialValues={menu}
    validationSchema={validationSchema}
    onSubmit={values => onFormSubmit(values)}
  ...
)

answered Mar 19, 2019 at 13:52

Dani Vijay

2,2682 gold badges25 silver badges38 bronze badges

1 Comment

CTS_AE Over a year ago

What if you need access to the values before the form submits?

Collectives™ on Stack Overflow

Access Formik's values outside of component | React

Some info

My problem

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Some info

My problem

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related