CODEWITHSUNDEEP
reactjsformik
Remi
Remi

Reputation: 5367

Reset Formik's dirty state to 'false' when a nullable value is changed to undefined

I am using a fetch to populate the initial values for Formik. One of the fields is null in the fetch result (password).

When I use this in a field, and change the input field to a value, the dirty state of the form becomes true.

Then when I remove that value again Formik will stay 'dirty'. Since Formik makes the field 'undefined' and not 'null'.

Does someone have a workaround for this?

Codesandbox: https://codesandbox.io/s/strange-cerf-29xw6

Upvotes: 1

Views: 4726

Answers (1)

Vencovsky
Vencovsky

Reputation: 31635

When you have a value that is null, you get the following warning:

Warning: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

So what you need to do is when you get the request, you have to set it to '' when some prop is null / undefined .

Please notice that you can't have a null value and also can't have undefined, it will break the input handling.

Upvotes: 2

Related Questions