Child redux-form component handleSubmit error.

Hello everyone! I am facing an issue and whenever I try to render a redux form child component inside a parent component I get the error “handleSubmit is not a function”.

I am guessing that this could be caused because I am doing something wrong with the containers but let me describe the situation I am facing and maybe someone can help me.

I have a Parent component that includes 2 child components. One of the child components is a redux-form and the other one is a stateless functional component.

const Parent = ({ inputList }) => (
  <div>
    <MyForm />
    <MyList inputList={inputList} />
  </div>
);
export default Parent;

As I mentioned the MyList component is stateless so it has no container and I am just passing a prop to render a list. The Parent Component has a container ParentContainer like the following:

const mapStateToProps = state => (
  {
    inputList: state.get('inputList')
  }
);

const ParentContainer  = connect(mapStateToProps)(Parent);
export default ParentContainer;

The Form component is the following (don’t pay attention to the form tags since I am using reactstrap and that is not the issue):

const MyForm= ({ handleSubmit, submitSearch, submitting }) => (
  <span>
    <Form onSubmit={handleSubmit(submitSearch)}>
      <FormGroup row>
        <Col sm={2}>
          <Field
            id="itemCode"
            name="itemCode"
            component={inputField}
            type="text"
            placeholder="Search for Item"
          />
        </Col>
        <Col sm={2}>
          <Label for="dateFrom" sm={2}>Date From</Label>
          <Field
            id="dateFrom"
            name="dateFrom"
            component={inputField}
            type="text"
            placeholder="1/1/2016"
          />
        </Col>
        <Col sm={{ size: 2, offset: 1 }}>
          <Button type="submit" color="primary" disabled={submitting}>
            Search
          </Button>
        </Col>
      </FormGroup>
    </Form>
  </span>
);

export default MyForm;

The Form component also has a FormContainer:

const mapDispatchToProps = dispatch => (
  {
    submitSearch: (formSearchData) => {
      dispatch(searchItems(formSearchData));
    }
  }
);

const MySearchForm = reduxForm({
  form: 'mySearchForm'  // a unique identifier for this form
})(MyForm);

const MyFormContainer =
  connect(null, mapDispatchToProps)(MySearchForm);

export default MyFormContainer;

Now whenever I try to navigate to the Parent Component I get the error: “Uncaught TypeError: handleSubmit is not a function at MyForm (index.js:17)”

Any help would be really appreciated since I am stuck with this for some hours now…

[gustavohenke]

You’re using <MyForm />, but your wrapped form is <MySearchForm>/<MyFormContainer>. Please check whether this is the problem.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.