title: redux-form Field with custom component - default value?
body: <p>I'm trying to set default values for some <code>Field</code>s in my form that use a custom component but I can't quite get it to work. The reason I want to do that is because when I press the submit button I get <code>undefined</code> as values for the <code>Field</code>s that do not have a value. For that reason I would like to specify a default value for the <code>Field</code> to be initialized with, but I can't figure out how to do that when passing a custom component to the field.</p>
  
  <p>This is my form</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  import { connect } from 'react-redux';
  import { Field, reduxForm } from 'redux-form';
  import CustomInput from './CustomInput';
  
  class ProfileForm extends Component {
      render() {
          const {
              handleSubmit,
              error,
              submitting
          } = this.props;
  
          return (
              &lt;form className='registerform' onSubmit={handleSubmit}&gt;
                  &lt;div className='form-panel'&gt;
                      &lt;label&gt;
                          Persoonlijke gegevens
                      &lt;/label&gt;
                      &lt;div className='row row-small'&gt;
                          &lt;div className='col-xs-5'&gt;
                              &lt;Field name='firstName'
                                  className='form-group'
                                  inputClassName='form-control'
                                  component={CustomInput}
                                  type='text'
                                  placeholder='Voornaam'
                                  defaultValue='some lastName' /&gt;
                          &lt;/div&gt;
                          &lt;div className='col-xs-7'&gt;
                              &lt;Field name='lastName'
                                  className='form-group'
                                  inputClassName='form-control'
                                  component={CustomInput}
                                  type='text'
                                  placeholder='Achternaam'
                                  defaultValue='some firstName' /&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div className='form-panel'&gt;
                      &lt;button type='submit' className='btn btn-big btn-blue btn-full uppercase' disabled={submitting}&gt;
                          {
                              submitting &amp;&amp;
                              &lt;span&gt;Opslaan...&lt;/span&gt;
                          }
                          {
                              !submitting &amp;&amp;
                              &lt;span&gt;Opslaan&lt;/span&gt;
                          }
                      &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          );
      }
  }
  
  ProfileForm = reduxForm({
      form: 'profile'
  })(ProfileForm);
  
  export default connect()(ProfileForm);
  </code></pre>
  
  <p>In the above code sample I tried to use <code>defaultValue</code> attribute to set the default value, as per the documentation <a href="https://redux-form.com/6.0.0-alpha.4/docs/api/field.md/" rel="nofollow noreferrer">here</a>, however this didn't work and I also noticed this version of the documentation was outdated, the most recent version does not seem to have a <code>defaultValue</code> attribute.</p>
  
  <p>This is my <code>CustomInput</code> component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import classNames from 'classnames';
  
  class CustomInput extends Component {
      render() {
          let {
              input,
              placeholder,
              type,
              className,
              inputClassName,
              showLabel,
              meta: { touched, error }
          } = this.props;
  
          if (error) {
              inputClassName += ' invalid';
          }
  
          let inputElement = &lt;input {...input} className={inputClassName} type={type} placeholder={placeholder} /&gt;;
          if (type === 'textarea') {
              inputElement = &lt;textarea {...input} className={inputClassName} placeholder={placeholder} /&gt;;
          }
  
          return (
              &lt;div className={className}&gt;
                  {
                      showLabel &amp;&amp;
                      &lt;label&gt;{placeholder}&lt;/label&gt;
                  }
                  {inputElement}                
                  {
                      error &amp;&amp;
                      &lt;span&gt;
                          {error}
                      &lt;/span&gt;
                  }
              &lt;/div&gt;
          );
      }
  }
  
  CustomInput.defaultProps = {
      showLabel: false
  };
  
  export default CustomInput;
  </code></pre>
  
  <p>How do I pass along a default value to my <code>CustomInput</code> component? The default value could be different for each instance of <code>CustomInput</code>, so I don't want to store the default value in there. Any help would be greatly appreciated.</p>