Forms in React Resetting All Fields

Question

I have a problem with my react application. First, when i entered something in my last name and then i open the "Address Dialog" and enter something in it its ok. But the problem is that if i already entered the Last Name first and then i open the "Address Dialog" and entered the "Address" and submit it, it resets the value of the Last Name. I believe this is because of the enableReinitialize BUT if i dont put that then how will i pass the value of Address from the "Address Dialog" to the "Form" Address?

Pls check my codesandbox here

CLICK HERE

Answer 1

When you use "enableReinitialize" it will reset the form data with "initialValues", in your case, you set initialValues={{LastName: "",Address: address ? address : ""}} "LastName: ''" to empty so the LastName value is cleared

You need to handle the LastName in state and update the initialValues

My suggestion is to simplify the code and avoid using nested formik