Redux Form: MapStateToProps is breaking form

Question

The goal of the MapStateToProps in this Redux Form is to check whether the user is in the database and to pass back a validuser state back to the submitted form so that I can either render an error message, or redirect the user to the home page. The problem is that when I try to connect MapStateToProps to the form, it throws an error.

Redux Form:

import React, { Component } from "react";
import { connect } from 'react-redux';
import { reduxForm, Field, Form, reset } from "redux-form";
import { Link } from 'react-router-dom';
import { checkUser } from "../actions/index";


class SignIn extends Component {
  constructor(props) {
    super(props)

    this.state = {
      user: {
        validUser: {
          username: null,
          validUser: null
        }
      }
    }
  }

  onSubmit = (props) => {
    this.props.dispatch(checkUser(props));
  }

  render() {
    const { handleSubmit, reset } = this.props;

    return(
      <div>
      <form onSubmit={ handleSubmit(this.onSubmit.bind(this)) }>
        <h3>Sign In!</h3>

        <div>
          <label><h3>Username</h3></label>
          <div>
            <Field name="username" component="input" type="text" />
          </div>
        </div>

        <div>
          <label><h3>Password</h3></label>
          <div>
            <Field name="password" component="input" type="password" />
          </div>
        </div>

        <button type="submit" className="btn btn-primary">Submit</button>
        <button><Link to="/me" className="btn btn-danger">Cancel</Link></button>
      </form>

    </div>
    )
  }
};

function mapStateToProps(state) {
  return {
    user: state.user.validUser
  };
};

let signInForm = reduxForm(
  { form: "signInForm" })(SignIn);


export default signInForm = connect(mapStateToProps, null)(SignIn);

However I get the following error:

Uncaught TypeError: handleSubmit is not a function
    at SignIn.render (signin.js:33)
    at ReactCompositeComponent.js:796
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:795)
    at ReactCompositeComponentWrapper._renderValidatedComponent (ReactCompositeComponent.js:822)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:362)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)
    at Object.mountComponent (ReactReconciler.js:46)
    at ReactCompositeComponentWrapper.performInitialMount (ReactCompositeComponent.js:371)
    at ReactCompositeComponentWrapper.mountComponent (ReactCompositeComponent.js:258)

Can anyone advise on debugging this issue?

Answer 1

First, mapStateToProps is not something exclusive to redux form, it is from redux/react-redux.

The problem with your code is that you are passing the SignIn component to the connect function, and not the redux-form's HOC component you've just created.

let signInForm = reduxForm(
   { form: "signInForm" })(SignIn);

export default signInForm = connect(mapStateToProps, null)(SignIn);

SignIn is not a redux-form component so it will not have the handleSubmit function.

What you want is this:

export default connect(mapStateToProps, null)(signInForm);