How do you pass in a dynamic form name in redux form?

Question

Im trying to use this code to pass a dynamic form name into reduxForm.

Here is the code that I found:

let FormAddress = compose(connect((state, props) => ({form: props.form})), reduxForm({destroyOnUnmount: false, asyncBlurFields: []}))(ValidationForm);

From this article: https://github.com/erikras/redux-form/issues/603#issuecomment-254271319

But I'm not really sure whats going on.

This is how I'm currently doing it:

const formName = 'shippingAddress';
const form = reduxForm({
  form: formName
});

export default connect(mapStateToProps)(CityStateZip);

But I would like to be able to pass it in using props, like this:

const formName = 'shippingAddress';
const form = reduxForm({
  form: props.form
  // validate
});

export default connect(mapStateToProps)(CityStateZip);

But when I try that, it complains that it doesnt know what props is - because I believe it's outside the scope of the function above.

Can someone help me?

Answer 1

The parent component which calling the FormAddress component should send the name of the form in props as props.form:

var formId="SomeId"
<FormAddress form={formId} />

// and in your FormAddress component have 
const form = reduxForm({
  //no need to put form again here as we are sending form props.
});

This works for me.

Answer 2

That snippet basically uses the compose function from redux library. Here's something you can try...

<FormAddress name="shippingAddress" />

So in your components/FormAddress.js file

import React from 'react';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { reduxForm } from 'redux-form';

class FormAddress extends React.Component { ... }

const mapStateToProps = (state, ownProps) => {
    return {
        form: ownProps.name,
        // other props...
    }
}

export default compose(
    connect(mapStateToProps),
    reduxForm({
        //other redux-form options...
    })
)(FormAddress);

Hope this helps!