Formik: withFormik initialValues not working

Created on 9 Jul 2018  路  3Comments  路  Source: formium/formik

Current Behavior
My form loads but the mapPropsToValues (or initialValues) don't appear despite my console.log actually showing that the profile object is filled out (some values are null which is fine).

Not to sure if it is my props typings that is the issue?

Expected behavior
Basically the form should look like so:

Additional context
My gist (withFormik.tsx)

  • Formik Version: 0.11.11
  • React Version: 16.2
  • TypeScript Version: 2.7.2
  • Browser and Version: Chrome@latest
  • OS: MacOS
  • Node Version: 10.4.1
  • Package Manager and Version: yarn 1.7.0

Most helpful comment

You need to be careful with enableReinitialize and mobx/redux and make sure you are only supplying exactly the props formik needs. Otherwise, your form will reset when an unwanted prop changes (even if you are not using it in your form).

All 3 comments

hmmmm found this section in the example/docs

{/*
  The benefit of the render prop approach is that you have full access to React's
  state, props, and composition model. Thus there is no need to map outer props
  to values...you can just set the initial values, and if they depend on props / state
  then--boom--you can directly access to props / state.

  The render prop accepts your inner form component, which you can define separately or inline
  totally up to you:
  - `<Formik render={props => <form>...</form>}>`
  - `<Formik component={InnerForm}>`
  - `<Formik>{props => <form>...</form>}</Formik>` (identical to as render, just written differently)
*/}

Looks like I might need to stick with the Formik component instead of the HoC, since I have mobx stores that I need to get initial values from for certain forms. Is this correct?

You need to be careful with enableReinitialize and mobx/redux and make sure you are only supplying exactly the props formik needs. Otherwise, your form will reset when an unwanted prop changes (even if you are not using it in your form).

Yeh sounds like I might need to only render the form once my mobx store is loaded with data so the initialValues are set then I am using the which is a little more verbose in ways but works well. Will give it a shot thanks.

Was this page helpful?
0 / 5 - 0 ratings