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

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 =>
  
                              ^^^^^^^ 
                       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 =>
  
                              ^^^^ 
                    declare the form identifier
)

Your form definition would be:

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