Declaring redux form in both the child and parent component causes error

Question

Uncaught Error: asyncValidate function passed to reduxForm must return a promise

Declaring multiple redux forms in both child and parent component causes the error above. I feel like it's a bug actually.

I have a parent component called WorkExperience, where I render multiple child components called DashboardListItem, which is the work experience a user has.

In the parent component I have a redux form to create a work experience. Also, I have other redux forms inside the child component where I can toggle edit forms for each list item.

The structure is same as this.

WorkExperience (has postWorkExperienceForm)
- DashboardListItem (has edit form with populated initial values)
- DashboardListItem
- DashboardListItem

So, this structure is causing the error when I type into toggleable edit form. If I remove redux form declaration either from the parent or the child component, everything becomes normal.

Also all the forms are in the store too.

Thank you

Parent Component

renderWorkExperience(){
    const workExperience = this.props.candidate.workExperience;
    return Object.keys(workExperience).map((key, index) => {            
        let date = `${workExperience[key].startYear}-${workExperience[key].endYear}`
        return <DashboardListItem key={index} {...this.props}
            title={workExperience[key].companyName} 
            subTitle={workExperience[key].title} 
            meta={date}
            summary={workExperience[key].summary}
            initialValues={workExperience[key]}
            form={workExperience[key]._id} />
    });
}

renderForm(){
    const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8'
    const { handleSubmit } = this.props;

    return(
        <form onSubmit={ handleSubmit(this.onSubmit) } className="form-horizontal">
            <div className={this.state.displayForm ? 'd-block mb8' : 'd-none'}>
                <Field name="companyName"
                    type="text"
                    label="Company Name"
                    placeholder="Apple inc."
                    id="input-company-name"
                    component={renderHorizontalTextField} />

                <Field name="title"
                    type="text"
                    label="Title"
                    placeholder="Marketing Specialist"
                    id="input-title"
                    component={renderHorizontalTextField} />

                <Field name="startYear"
                    type="text"
                    label="Start Year"
                    placeholder=""
                    id="input-start-year"
                    component={renderHorizontalTextField} />

                <Field name="endYear"
                    type="text"
                    label="End Year"
                    placeholder="Blank if current"
                    id="input-end-year"
                    component={renderHorizontalTextField} />

                <Field name="summary"
                    rows="4"
                    label="Summary"
                    placeholder="Summary..."
                    id="input-summary"
                    component={renderTextAreaFieldWithLabelAndPopover} />
            </div>
            <button type={this.state.displayForm ? "button" : "submit"}
                className={activeClass}
                onClick={this.handleClick}>{ !this.state.displayForm ?
                'Add Work Experience' : 'Save' }
            </button>
        </form>
    )
}

export default reduxForm({
    form: 'postWorkExperienceForm'
})(WorkExperience);

Child Component

renderForm(){
    const activeClass = this.state.displayForm ? 'btn btn-success btn-block mt8' : 'btn btn-primary btn-block mt8';
    const { handleSubmit } = this.props;

    return(
        <form onSubmit={ handleSubmit(this.onSubmit) } className="form-horizontal">
            <div className={this.state.displayForm ? 'd-block mt8' : 'd-none'}>
                <Field name="companyName"
                    type="text"
                    label="Company Name"
                    placeholder="Apple inc."
                    id="input-company-name"
                    component={renderHorizontalTextField} />

                <Field name="title"
                    type="text"
                    label="Title"
                    placeholder="Marketing Specialist"
                    id="input-title"
                    component={renderHorizontalTextField} />

                <Field name="startYear"
                    type="text"
                    label="Start Year"
                    placeholder=""
                    id="input-start-year"
                    component={renderHorizontalTextField} />

                <Field name="endYear"
                    type="text"
                    label="End Year"
                    placeholder="Blank if current"
                    id="input-end-year"
                    component={renderHorizontalTextField} />

                <Field name="summary"
                    rows="4"
                    label="Summary"
                    placeholder="Summary..."
                    id="input-summary"
                    component={renderTextAreaFieldWithLabelAndPopover} />
                <button className="btn btn-success" type="submit">Save</button>
            </div>
        </form>
    )
}

export default reduxForm({
    enableReinitialize: true
})(
    connect(null, { updateWorkExperience })(DashboardListItem)
);

Found out that a similar question is asked here. Although he hasn't fixed the problem, found a way around.

Redux Form - "form={ }" and "initialValues={ }" properties not recognized with multiple forms (redux-form v7.0.4)

score 0 · Answer 1 · answered Apr 19 '18 at 22:44

I ended up putting work experience form into a separate component called WorkExperienceForm and imported it into WorkExperience and DashboardListItem components. This solved the issue.

Form names are passed to WorkExperienceForm from the parent components.

I was planning to put the forms into a separate component anyway, but wanted to solve the problem. So the bug is still there if it is one.

WorkExperienceForm

import React from 'react';
import { Field, reduxForm } from 'redux-form';

import { renderHorizontalTextField } from '../Fields/TextFields';
import { renderTextAreaFieldWithLabelAndPopover } from '../Fields/TextAreaFields';

const WorkExperienceForm = ({ handleSubmit, onSubmit }) => {
    return(
        <form onSubmit={ handleSubmit(onSubmit) } className="form-horizontal">
            <Field name="companyName"
                type="text"
                label="Company Name"
                placeholder="Apple inc."
                id="input-company-name"
                component={renderHorizontalTextField} />

            <Field name="title"
                type="text"
                label="Title"
                placeholder="Marketing Specialist"
                id="input-title"
                component={renderHorizontalTextField} />

            <Field name="startYear"
                type="text"
                label="Start Year"
                placeholder=""
                id="input-start-year"
                component={renderHorizontalTextField} />

            <Field name="endYear"
                type="text"
                label="End Year"
                placeholder="Blank if current"
                id="input-end-year"
                component={renderHorizontalTextField} />

            <Field name="summary"
                rows="4"
                label="Summary"
                placeholder="Summary..."
                id="input-summary"
                component={renderTextAreaFieldWithLabelAndPopover} />
        </form>
    )
}

export default reduxForm({
    enableReinitialize: true
})(WorkExperienceForm);

Declaring redux form in both the child and parent component causes error

1 Answers1