How to embed the same redux-form multiple times on a page?
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!