react - submitting form from parent or sibling

hey all, I am struggling to implement a design that has the submit button for a form essentially in the parent. the markup essentially boils down to something like:
div
menubar
form
div
menubar
form
A button in the menu bar can submit the form, and it should be disabled if the form is dirty, etc. I’m achieving the submission via passing a ref. Which feels hacky. But I can’t get “is dirty?” and other form lifecycle events easily. I also don’t want to pull up the state because menubar is reasonably far up in the tree and I want the form to be reusable in different places or with different actions. Any patterns for doing this well? I’m using Formik if it matters.
6 Replies
barry
barry3y ago
If you want live updates on it being "dirty" you need to use state. Or listen to onChange and check the whole form every time
jtgi
jtgiOP3y ago
hmm if I use onChange then ill basically end up reimplementing all the validation as well up in some store layer.
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
jtgi
jtgiOP3y ago
with a top level context or store I suppose then right?
Unknown User
Unknown User3y ago
Message Not Public
Sign In & Join Server To View
jtgi
jtgiOP3y ago
I’ve gone this whole project with just react query and useState
Want results from more Discord servers?
Add your server