Kyle Kyle - 6 months ago 47
React JSX Question

How to embed the same redux-form multiple times on a page?

I'm having an issue trying to embed multiple forms on one page. I noticed

executes once, even with multiple forms on the page, that's why I can't dynamically generate different form names.

Screenshot showing multiple text fields bound together.

function configForm(){
const uuid = UUID.generate();

const config = {

return config;

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer);

How can I add the forms so that they behave independent of each other?


There are two ways to embed the same form multiple times on the page.

1. Using formKey (Redux Form < 6)

formKey is the official way of doing this when using redux-form@5 (or below). You have to pass the key from the parent to identify the form: =>
  <PanelForm key={panel.uuid} formKey={panel.uuid} initialValues={panel} />
                       declare the form key

Your form definition would be:

reduxForm({form: "AddCardForm", fields: ["text"], validate})

However this pattern has been removed from redux-form@6.

2. Using a unique form name (Redux Form ≥ 5)

The following pattern is the recommended way of identifying forms since Redux Form 6. It is fully compatible with previous versions. =>
  <PanelForm key={panel.uuid} form={`AddCardForm_${panel.uuid}`} initialValues={panel} />
                    declare the form identifier

Your form definition would be:

reduxForm({fields: ["text"], validate})
// No `form` config parameter here!