Lost with formik "values" affecting all forms

[danidanimoraes]

Hello!

Im kinda lost here and I can't even find what I want on Google because I don't really know what to search.

The scenario is:

• I have multiple cards, but let's imagine two, that are two draggable divs.
• When I click on a card, in summary it opens a drawer on the right, which contains a Formik form, with its props.values used on inputs etc.
• The drawer on the right has multiple tabs for each step, every step has a form

When I fill the forms, and change between tabs, everything workd perfectly: I go back to a filled tab and the inputs are filled correctly etc.
BUT when I click on another card to fill with other values, it renders on the drawer THE SAME forms, with everything filled for the first card. And if I fill the forms for the second card, it changes also the forms for the first one. Props.values is always the same object.

I thought this could be a problem with non-unique something, so I included an unique "key" attribute on Formik's parent.
Then, the scenario changed: I fill the forms for the first card, everything is okay. I go to the second card and it's not pre-filled: Great! But when I go back to the first card that I already filled, everything is empty. So now it looks like it's cleaning props.values everytime.

I just wanted to have multiple props.values for multiple formiks: form 1 has its props.values, form 2, has its props.values... so I can use them independently.

Am I missing something here?

Thanks in advance.

[johnrom]

Sounds like you figured out your problem, and found a new one

1. You weren't using unique components for your forms using key
2. You are unmounting your forms when switching between cards (might be good if form render is expensive)

You may elect to either Save your state (redux, parent component state, etc) before unmounting, or hiding via CSS instead of unmounting your component using display: none or another method.

The Save your state method will vary depending on how your app is set up, and before even discussing it I'd probably ask for a codesandbox with a minimal reproduction of your setup. I have no way to know what mechanism is controlling whether your form is rendered in order to determine the correct place to save your state.

[danidanimoraes]

Thanks a lot for the fast answer. I understood better my problem as you answered and noticed that the components might not be well-built. I will try to improve that and if I am able to replicate the minimum of the projext on a codesandbox, I will.

Thank you @johnrom !