CODEWITHSUNDEEP
reactjsreact-final-formfinal-form
Gabriel
Gabriel

Reputation: 352

Large react-final-form spread over multiple sections

I'm building a large form that has multiple sections an a single submit button in a header. When I toggle the different sections of the form, the form state found in the FormRenderProps reflects the active section's state but not the state of the whole form.

How can I capture the state of all sections at once to use on the submit button?

E.g. If one section is dirty and the other is pristine, I would like to be able to enable the submit button regardless of the section that is currently active. Active meaning the section is currently rendered on the page while inactive means either not yet rendered or previously rendered.

CodeSandbox example

Upvotes: 2

Views: 965

Answers (1)

Gabriel
Gabriel

Reputation: 352

Turns out that each component has to be rendered, not conditionally for react-final-form to capture all the states at once. After moving my sections in tabs where all sections are rendered but not displayed, everything worked as I wanted.

CodeSandbox example

Upvotes: 2

Related Questions