My React web app has the below layout in a page:
a. Common “Info” section (form) at the upper half.
b. Say 4 different “Details” tabs in the lower half. (Also forms)
Now I have a button in a. that needs to be enabled/disabled based on form field values filled across b1 & b2 & b3 & b4 forms.
How can I best solve this? I tried the below..
-
With Formik and Yup validations – I gather that all related fields must be wrapped in the same form component, so that’s out.
-
We could try getting data from API on mount, for all 4 tab forms (b1-b4), do a validation on the fly and set flag for disable/enable button in a. (Phew! That sounds like a lot of over head!)
-
Any other approaches?
AKira is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1