1

I have the following structure in my ReactJS App - CodeSandBox link. I'm trying to somehow submit the Formik form by using a button of Bootstrap modal window, however I am unable to understand how to call the form submission from 2 components down the tree and bring the functions together.

Could someone kindly advise whether it's even something that can be achieved?

Thanks!

Mario84
  • 33
  • 2
  • 9
  • You never use your `FormFields` in the modal so I don't understand the problem clearly – Rostyslav Jul 13 '20 at 08:02
  • There is a Formik form field "Title" that is being used inside the Modal. – Mario84 Jul 13 '20 at 08:07
  • Does this answer your question? [React Formik use submitForm outside ](https://stackoverflow.com/questions/49525057/react-formik-use-submitform-outside-formik) – Rostyslav Jul 13 '20 at 08:14

1 Answers1

5

In the FormFields component, you need to add an id to your form

<Form id="fooId">

and for the modal button you add the form and type attribute like:

<Button
 ...
 type="submit"
 form="fooId"
 ...
/>

And the form would be submitted. You can skip passing the onClick event to that button and pass the doSubmit method to the Formik component in FormFields component.

Codesandbox

k.s.
  • 2,964
  • 1
  • 25
  • 27