Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Add enableReinitialize option and set it to false by default

See original GitHub issue

Currently, if you pass initialValues, you can overwrite them by passing another value - the form will update its values.

This brings a problem when your data is stored for example in redux or in another component. You get this data and pass into form. Once this values are changed (in redux / another component) - your form magically updates and removes all data you’ve changed.

In redux-form there is a nice enableReinitialize option which is false by default. You can set it to true and your form will update itself.

I think, the same behavior and option should be added to formik so your data won’t suddenly disappear.

For the first related issue, there is keepDirtyOnReinitialize option which prevents form from refreshing dirty values on initialValues change.

Issue Analytics

State:
Created 6 years ago
Reactions:6
Comments:6 (5 by maintainers)

Top GitHub Comments

18reactions

jaredpalmercommented, Sep 27, 2017

Solution is here: https://github.com/jaredpalmer/formik/pull/181#issuecomment-332594908.

tl;dr: Just use React 😄, componentWillReceiveProps and setValues…

9reactions

jaredpalmercommented, Sep 30, 2017

@megazoll mapPropsToValues will only pass props that are not functions by default. If you have an edge case, can you share it in a separate issue?

@VladShcherbin I have added enableReinitialize to master and initialValues is now passed down to props and through context. Should be trivial to get behavior you desire.

Top Results From Across the Web

Formik reset form, not to the initial state but a new one

Default is false . Control whether Formik should reset the form if initialValues changes (using deep equality). This option should work for ...

API Reference - Formik

enableReinitialize ?: boolean. Default is false . Control whether Formik should reset the form if initialValues changes (using deep equality).

Redux Form - `reduxForm()`

Defaults to false . If the keepDirtyOnReinitialize option is also set, the form will retain the value of dirty fields when reinitializing.

pass data from another component to formik form - You.com

styles.css"; export default function App() { const saveRef = useRef(null) return ... jaredpalmer/formikAdd enableReinitialize option and set it to false by ...

React JS Redux Form with Initial value, Validations and Props ...

To use Redux form you need to add redux-form reducer with our store as ... enableReinitialize: true })(ExampleForm); export default connect( ...