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

Question

I'm having an issue trying to embed multiple forms on one page. I noticed configForm 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 = {
    form:`AddCardForm_${uuid}`,
    fields:['text'],
    validate:validate
  }

  return config;
}

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

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

Answer 1

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

1. Using formKey (Redux Form 5)

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:

panels.map(panel =>
  <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 and above)

The following pattern is the recommended way of identifying forms since Redux Form 6. It is fully compatible with previous versions.

panels.map(panel =>
  <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!