Simple Redux-Form Component returns undefined

Question

Just created this form as part of a tutorial. However, my console log is giving me undefined whenever I submit the form. What am I doing wrong?

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

class Signin extends Component {
  handleFormSubmit({email, password}) {
    console.log(email); // this gives me 'undefined'
  }
  render() {
    const {handleSubmit, fields: {email, password}} = this.props;

    return (
    <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
      <fieldset className="form-group">
      <label>Email:</label>
      <input {...email} className="form-control" />
      </fieldset>
      <fieldset className="form-group">
      <label>Password:</label>
      <input {...password} className="form-control" />
      </fieldset>
      <button action="submit" className="btn btn-primary">Sign in</button>
    </form>
    );
  }
}

export default reduxForm({
  form: 'signin',
  fields: ['email', 'password']
})(Signin);

Answer 1

This is due to an update to redux-form.

Rather than importing the values of {email, password} from this.props we instead use a Field component imported from redux-form.

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

Then using it in place of the input tag you have:

<fieldset className="form-group">
  <label>Email:</label>
  <Field
    name="email"
    className="form-control"
    component="input"
    type="text"
    placeholder="Email"
  />
</fieldset>

The connection of this input to redux-form now comes from the name property instead of extracting it from this.props

Important to note: that the name MUST be the same as the name in the fields: [] array defined in the reduxForm:

export default reduxForm({
  form: 'signin',
  fields: ['email', 'password']
})(Signin);

---

Building on this, if you want to customise the component that the Field uses, you can define your own custom component pretty easily.

Instead of supplying a string to Field's component property, you can define a function:

<div className="form-group">
  <label>Last name:</label>
  <Field type="text" className="form-control" placeholder="Smith" name="lastName"
  component={textField} />
</div>

textField is imported from another file: import {textField} from '../../redux_form_elements';

And textField is as follows:

import React from 'react';

export const textField = (field) => (
  <div>
    <input className="form-control" {...field.input} type={field.type} placeholder={field.placeholder} />
    {field.meta.touched && field.meta.error &&
    <label id="basic-error" className="validation-error-label">This field is required.</label>
  }
  </div>
);

Answer 2

This looks like the Grider Tutorial. I fixed it this way, with a renderInput function which takes the field. Not sure if this is useful for you.

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


const renderInput = field => (
  <div>
  <input {...field.input} type={field.type} className="form-control" />
  {field.meta.touched && field.meta.error}
  <span>{field.meta.error}</span>
  </div>
 );

class Signin extends Component {

  handleFormSubmit({email, password}) {
    console.log(email);
    console.log("Hi");

  }
  render() {
    const {handleSubmit, fields: {email, password}} = this.props;

    return (
    <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
      <fieldset className="form-group">
      <label>Email</label>
      <Field
      name="email"
      component={renderInput}
      type="text" />
      </fieldset>
      <fieldset className="form-group">
      <label>Password</label>
      <Field
      name="password"
      component={renderInput}
      type="text" />
      </fieldset>
      <button action="submit" className="btn btn-primary">Sign in</button>
    </form>
    );
  }
}

export default reduxForm({
  form: 'signin',
  fields: ['email', 'password']
})(Signin);