redux-form fields parameters are empty

Question

I'm having some problems with redux-form, basically the parameters that handleSubmit pass to the function that it receives are empty...

Let me describe my files (I'll use a gist for clarity and for the sake of brevity):

1. The stateless component
2. The Container
3. The reducer
4. The renderLoginField

If you can see in this line: <form onSubmit={handleSubmit(this.onFormSubmit.bind(this))}>

And this ultra-simple function:

onFormSubmit(fields) {
  console.log(fields);
};

Fields are empty, but the form reducer is active, and exists with registered fields:

Any idea?

Answer 1

Your renderLoginField function, which renders the custom field component (d'oh!) is not making use of the input prop.

Here is the properly changed code for your renderLoginField function:

const renderLoginField = ({icon, input, type, meta: { touched, error }}) => {
  let mailIcon = 'fa-envelope-o';
  let passIcon = 'fa-key';
  return (
    <div className='form-group input-group'>
      <span className='input-group-addon' id='email'>
        <i className={`fa ${icon === 'mail' ? mailIcon : passIcon}`} />
      </span>
      <input
        { ...input } // <-- missing in your code!!
        type={type}
        aria-describedby={type}
        name={input.name}
        placeholder={`Insert ${type}`}
        className='form-control'/>
    </div>
  );
};

If you check the docs for <Field> component, you'll see the following statement, which describes how important it's to do that:

Input Props

The props under the input key are what connects your input component to Redux and are meant to be destructured into your <input/> component