How to handleSubmit with a redux-form
react-redux, reactjs, redux, redux-form
Solution
Redux-Form decorates your component with `handleSubmit` prop. According to docs it's:
a function meant to be passed to `<form onSubmit={handleSubmit}>` or to `<button onClick={handleSubmit}>`. It will run validation, both sync and async, and, if the form is valid, it will call `this.props.onSubmit(data)` with the contents of the form data.
Optionally, you may also pass your `onSubmit` function to `handleSubmit` which will take the place of the `onSubmit` prop. For example:
So if your component doesn't have `onSubmit` property you have to 'manually' pass your submit handler to `handleSubmit` function. Please try this:
<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
Please don't confuse your `handleSubmit` method with prop passed from Redux-Form with the same name.
Problem
I'm working to use redux-form for the first time. I am able to render the form but I have not been able to handle the submit. While I eventually want to send the data to the server, at this point, I'm simply trying to console log the form field values. I'm getting the error: `Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop` Here's my Profile.jsx file ``` import React, {Component} from 'react'; import {connect} from 'react-redux'; import {withAuth} from 'react-devise'; import { Field, reduxForm } from 'redux-form'; class Profile extends Component { handleSubmit(data) { console.log('Submission received!', data); } render() { const { handleSubmit } = this.props; return ( <form onSubmit={handleSubmit}> <div> <label htmlFor="firstName">First Name</label> <Field name="firstName" component="input" type="text"/> </div> <div> <label htmlFor="lastName">Last Name</label> <Field name="lastName" component="input" type="text"/> </div> <div> <label htmlFor="email">Email</label> <Field name="email" component="input" type="email"/> </div> <button type="submit">Submit</button> </form> ); } } // Decorate the form component Profile = reduxForm({ form: 'profile' // a unique name for this form })(Profile); const mapStateToProps = state => { return { currentUser: state.currentUser }; }; export default connect(mapStateToProps)(withAuth(Profile)); ``` How can I handle the submitted values in a way where I can eventually send them to my API?