Formik: Formik component doesn't support mapPropsToValues prop.

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

Current Behavior

Using Formik component render prop doesn't execute mapPropsToValues

Desired Behavior

Formik component render props should expose the same functionality as the withFormik HOC

Suggested Solution

Adding mapValuesToProps to Formik component render prop

Who does this impact? Who is this for?

All users

Describe alternatives you've considered

using withFormik, although in my opinion this is somewhat a more intrusive implementation of Formik (adding props to parent component propTypes)

Most helpful comment

If you look at the Readme example of Formik component, there's a note:

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.

If you have a component that wraps
<Formik../> then you can just initialize initialValues with your props. Along with enableReinitialize={true} you can update the Form with new props...

Check out this line, it shows how it's achieving the same functionality..

https://github.com/jaredpalmer/formik/blob/master/src/withFormik.tsx#L153

All 3 comments

If you look at the Readme example of Formik component, there's a note:

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.

If you have a component that wraps
<Formik../> then you can just initialize initialValues with your props. Along with enableReinitialize={true} you can update the Form with new props...

Check out this line, it shows how it's achieving the same functionality..

https://github.com/jaredpalmer/formik/blob/master/src/withFormik.tsx#L153

@cdock1029 Thanks!

@jaredpalmer Using enableReinitialize is abruptly updating the form values and causing a rerender on the component. For example, a dropdown component is rerendered when selecting a value and if initialValues is updated due to this onChange event. I had to fix this by switching back to withFormik and using mapPropsToValues. As I never really needed to use Formik component, it worked for me. It would be nice to have mapPropsToValues for Formik Component

Was this page helpful?
0 / 5 - 0 ratings