React-redux-form: Form with multiple child/inner components

[im1dermike]

I don't see anything in the documentation that describes the follow scenario:

<Form onSubmit={...}>
  <InnerFormComponent1 />
  <InnerFormComponent2 />
  <button>Submit</button>
</Form>

In this example, the onSubmit occurs at the "parent" form level, but there are two child components, each with their own fields, validation, etc. that should roll up to the parent form.

Is there an example of how this can be done with react-redux-form?

[davidkpiano]

Please show me a full working code example in CodePen or CodeSandbox.

[im1dermike]

@davidkpiano I asked how you do something in this framework because I couldn't find any documentation in re: and you ask me to implement a fully working example?

[davidkpiano]

Yep, it might help you (us) work through the problem too. Show me how you expect it to work in RRF. I don't know what's inside <InnerFormComponent1 />.

[im1dermike]

I can try to put together an example but the InnerComponent are just parts of a form (Controls) that have been separated based on concern.

[davidkpiano]

Try using <Fieldset> instead: http://davidkpiano.github.io/react-redux-form/docs/api/Fieldset.html

[im1dermike]

Thanks. I'll give it a try and get back to you. Might be a week or so fyi.

[im1dermike]

I'm still working through getting my example to work in CodeSandbox, but here is the setup so you can understand it conceptually.

In summary, I need to implement a single form where controls within the form are stored in separate components, but they share a same parent form/model/submit event.

[im1dermike]

I finally got a chance to look at Fieldsets, and it indeed looks like that will solve my problem. Thanks!