Uncaught TypeError: _this.props.onSubmit is not a function when using redux-form
javascript, reactjs, redux-form
Solution
`handleSubmit` is a prop "injected" into the Component by redux-form, `onSubmit` is not... you either have to make sure you're supplying it yourself or just handle the form submit within `LoginForm#handleSubmit`
You can also do it this way: https://github.com/erikras/redux-form/issues/1163
references:
- http://redux-form.com/6.0.0-alpha.4/docs/faq/HandleVsOn.md/
Problem
I'm working with a React.js frontend, and when I try to login or signup I get the below error when clicking the `login` or `Sign up` buttons. ``` Uncaught TypeError: _this.props.onSubmit is not a function ``` The stacktrace is pointing to the following file, /src/containers/Login/index.js ``` // @flow import React, { Component } from 'react'; import { Field, reduxForm } from 'redux-form'; import { Link } from 'react-router-dom'; import { css, StyleSheet } from 'aphrodite'; import Input from '../../components/Input'; const styles = StyleSheet.create({ card: { maxWidth: '500px', padding: '3rem 4rem', margin: '2rem auto', }, }); type Props = { onSubmit: () => void, handleSubmit: () => void, submitting: boolean, } class LoginForm extends Component { props: Props handleSubmit = (data) => this.props.onSubmit(data); // handleSubmit: (data) => this.props.onSubmit(data); render() { const { handleSubmit, submitting } = this.props; return ( <form className={`card ${css(styles.card)}`} onSubmit={handleSubmit(this.handleSubmit)} > <h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Login to Sling</h3> <Field name="email" type="text" component={Input} placeholder="Email" /> <Field name="password" type="password" component={Input} placeholder="Password" /> <button type="submit" disabled={submitting} className="btn btn-block btn-primary" > {submitting ? 'Logging in...' : 'Login'} </button> <hr style={{ margin: '2rem 0' }} /> <Link to="/signup" className="btn btn-block btn-secondary"> Create a new account </Link> </form> ); } } const validate = (values) => { const errors = {}; if (!values.email) { errors.email = 'Required'; } if (!values.password) { errors.password = 'Required'; } return errors; }; export default reduxForm({ form: 'login', validate, })(LoginForm); ``` specifically the below line, ``` handleSubmit = (data) => this.props.onSubmit(data); ``` Again, any and all help is greatly appreciated. Finally, the entire project can be found here.