Redux Form Submitting Issue

Question

new to React-Redux. Having trouble submitting a form.

I get this message:

Not an error, but I'm not entirely sure what to do with this. My code to recreate this issue is below. It uses the local state to switch between a signup and signin form. Wonder if having two forms is the issue, although the render statement only returns one of the two. Would be great to get some expert advice :)

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

class Login extends Component {
  constructor(props) {
    super(props);

    this.state = { showLoginForm: false }
  }

  changeLoginFormState(e) {
    e.preventDefault();
    this.state.showLoginForm ? this.setState({showLoginForm: false}) : this.setState({showLoginForm: true});
    return false;
  }

  handleFormSubmit(values) {
    console.log(values);
  }

  signUpForm() {
    return (
      <div>
        <div className="auth-container">
           <form className="centerform" onSubmit={this.handleFormSubmit}>
            <fieldset>
              <label htmlFor="email">Email</label>
              <input type="email" id="email" className="form-field" id="email"/>
            </fieldset>
            <fieldset>
              <label htmlFor="password">Password</label>
              <input type="password" className="form-field" id="password"/>
            </fieldset>
            <fieldset>
              <label htmlFor="passwordConfirm">Confirm Password</label>
              <input type="password" className="form-field" id="passwordConfirm"/>
            </fieldset>

            <p><a onClick={e => this.changeLoginFormState(e)}>If you already have an account, Login here</a></p>
            <button className="btn btn-auth">Sign Up</button>
          </form>
        </div>
      </div>
    );
  }

  loginForm() {
    return (
      <div>
        <div className="auth-container">
          <form className="centerform" onSubmit={this.handleFormSubmit}>
            <fieldset>
              <label htmlFor="email">Email</label>
              <Field name="email" component="input" type="email" id="email" className="form-field"/>
            </fieldset>
            <fieldset>
              <label htmlFor="password">Password</label>
              <Field name="password" component="input" type="password" id="password" className="form-field"/>
            </fieldset>
            <fieldset>
              <label htmlFor="passwordConfirm">Confirm Password</label>
              <Field name="passwordConfirm" component="input" type="password" id="passwordConfirm" className="form-field"/>
            </fieldset>

            <p><a href="#"
                  onClick={e => this.changeLoginFormState(e)}>Don't have an account? Sign Up Here</a></p>
            <button className="btn btn-auth">Login</button>
          </form>
        </div>
      </div>
    );
  }

  render() {
    if (this.state.showLoginForm) {
      return this.loginForm();
    } else {
      return this.signUpForm();
    }
  }
}

export default reduxForm({
  form: 'authentication'
})(Login);

Answer 1

handleSubmit should be defined outside of you Form component and passed to it via props. All your inputs should be wrapped in Field components. Check out examples