Formik: How to set top-level form status in submit handler?

[mhienle]

❓ Question

How to set top-level form status in submit handler?

I'm aware that one can use actions.setStatus inside the submit handler of the Formik component. However, AFAIK I cannot access the current status of the form, so if I want to use a complex status I can only overwrite the whole status.

I'm looking for something like this

onSubmit={(values, actions) => actions.setStatus({ ...status, someKey: "someValue" })}

Is there a reason to hide the form's state and only expose the values in the submit handler?

The only workaround I can think of right now is to set the status via an onClick prop on the submit button, but that feels like spreading the submit logic over two places and doesn't handle failed submits the same way...

[krvajal]

AFAIK I cannot access the current status of the form

Can you elaborate on what do you mean by this?

[mhienle]

I mean that given (values, actions) inside onSubmit, there is no way to access status.

[krvajal]

I see what you mean, I tried to put it in code in this Codesanbox https://codesandbox.io/s/proud-lake-klynn, let me know if it correct

[mhienle]

That's correct. The use case I'm thinking of is an object-like status, i.e. something like { key1: value1, key2: value2, key3: value3 }, and I currently can't see a way to only override one of the keys of status inside onSubmit. I would be able to do that via actions.setStatus({ ...status, key1: newValue1 }) if I was able to access the current status.

[Niondir]

There is a workaround:

actions.setFormikState((prevState => {
    return {...prevState, status: {...prevState.status, readOnly: true}};
}))

But I agree, we should get access to the status :)

[tomhirschfeld]

+1, this would be great for me to use

I have a checkbox form with 3 buttons, and the 3 buttons trigger different actions for the selected items, was planning on using status for this, but now I'm not sure.