29

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?

Rafa Viotti
  • 9,998
  • 4
  • 42
  • 62
Kyle
  • 323
  • 3
  • 6

1 Answers1

61

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!
Florent
  • 12,310
  • 10
  • 49
  • 58
  • 1
    Thanks for this. Very nearly asked this question again ... wish it came up in my web searches!! – hack_on Nov 18 '16 at 02:07
  • 2
    Thanks. The version info in two options could be clarified a bit. My suggestion: 1. ... (Redux Form 5), 2. ... (Redux Form 6+) – jmu Jan 04 '17 at 21:49
  • I noticed that you wrote that the >5 pattern is recommended. This great answer solved a problem I was having, but never saw this in the docs anywhere. Where did you see it? – Matt Way Mar 27 '17 at 01:27
  • I don't remember. The doc says _`form`: the name of your form and the key to where your form's state will be mounted under the redux-form reducer_. Since you don't want to share the same data, that's the way to go. See https://github.com/erikras/redux-form/issues/1200#issuecomment-231741044 – Florent Apr 07 '17 at 14:36
  • 4
    Wow this was killing me for months. I always suspected this, but docs never stated so I always thought the way we are supposed to do things is put `form` only in the `reduxForm({form:'blah'})(MyFormComponent)` line. Absolutely killed me. How come this is not documented. And why even bother documenting the bad way. React is about reusable components, the form is reusable, but with `reduxForm({form:'blah'})()` method it becomes not reusable correct? So misleading - http://redux-form.com/7.0.3/docs/api/ReduxForm.md/#-code-form-string-code-required - it should note the conseuqnece of no reusabilty – Noitidart Aug 04 '17 at 05:59
  • @Florent What if we need to connect each form to state via formValueSelector? I've created a separate question for it: https://stackoverflow.com/questions/56635325/multiple-redux-form-with-formvalueselector – d0pe Jun 17 '19 at 16:25