0

I am using "react-final-form" script for Forms (I have also tried with "react-hook-form") and if I add style to my Inputs then onSubmit doesnt work (it reloads whole page).

I can not figure it out why.

There is snippet with part of my code -> https://codesandbox.io/embed/boring-wind-gnqx5?fontsize=14&hidenavigation=1&theme=dark

If I delete -> FormContainerPart <- Container in App-js then it works.

Thank you for helping!

JohnWayne
  • 651
  • 9
  • 28
  • Forms in general load a new page when submitted. When target is provided, forms reload the page (but send the form data to the server in the GET or POST request. The onSubmit function does not prevent this. If you want the button to not actually submit the http request, you have to return false from the onSubmit function. See https://stackoverflow.com/a/8664680/10875738 – Torge Rosendahl Jan 14 '22 at 12:36
  • Also, I got this in the sandbox: `Warning: validateDOMNesting(...):
    cannot appear as a descendant of
    .`
     – Torge Rosendahl Jan 14 '22 at 12:39

1 Answers1

1

It's not about styling, but about your generated HTML structure. FormContainerPart is a form so when you're submitting your form (by clicking the button) you're submitting your Form from react-final-form AND your form from FormContainerPart.

And as you're not catching the onSubmit handler on your form by FormContainerPart, well it goes to default navigator behavior, which is: reload the page

So, as there is no need for FormContainerPart to be a form just change your styled to

export const FormContainerPart = styled.div`
...
`
dbuchet
  • 1,561
  • 1
  • 5
  • 7