title: How to use a select input type with redux-form?
body: <p>I searched and tried a lot to use a select input type with my react form using redux-form library.</p>
  
  <p>Everything works, all other input types are ok, but not the select one for the following actions : initialize, retrieve the value submitted etc.</p>
  
  <p>I tried to use the model prop with "select" and with my own function to render it. When I use the select version for model, I manage to get the options of the combobox field but I don't manage to set a value and retrieve it when I submit. With my own function I don't even manage to set the options to the list...</p>
  
  <p>Here is my code :</p>
  
  <pre><code>// FormComponent file
  const { handleSubmit } = this.props;
  ...
  &lt;form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}&gt;
      &lt;Field name='ranking' className='input-row form-group form-control' component={renderSelectField}&gt;
                          {tennisRankings.map(ranking =&gt;
                            &lt;option value={ranking} key={ranking}&gt;{ranking}&lt;/option&gt;
                          )}
                        &lt;/Field&gt;
  ...
  ProfileForm.propTypes = {
    user: React.PropTypes.object,
    fields: React.PropTypes.shape({
      firstname: React.PropTypes.string,
      lastname: React.PropTypes.string,
      ranking: React.PropTypes.string,
      email: React.PropTypes.string,
      telephone: React.PropTypes.string,
      city: React.PropTypes.string
    }),
    errorMessage: React.PropTypes.string,
    confirmationMessage: React.PropTypes.string,
    onSubmitProfileUpdate: React.PropTypes.func.isRequired,
    handleSubmit: propTypes.handleSubmit,
    initialize: propTypes.initialize
  };
  
  export default reduxForm({
    form: 'profile',
    validate: validateProfileForm
  })(ProfileForm);
  </code></pre>
  
  <p>My function to render the field :</p>
  
  <pre><code>// Functions shared
  export const renderSelectField = (field) =&gt; {
    var styles = {};
    var containerStyle = getInputStylesContainer();
  
        if (field.input.value || field.meta.touched) {
          if (!field.meta.error) {
            styles = getInputStylesSuccess();
            containerStyle = classNames(containerStyle, {'has-success': true});
          } else {
            styles = getInputStylesError();
            containerStyle = classNames(containerStyle, {'has-error': true});
          }
        }
  
        return (&lt;div className={containerStyle}&gt;
          {displayInputLabel(styles.idInput, field.label)}
          &lt;select {...field.input} className='form-control' id={styles.idInput} value={field.input.value} type={field.type} placeholder={field.label} aria-describedby={styles.ariaDescribedBy} /&gt;
          &lt;span className={styles.glyphicon} aria-hidden='true' /&gt;
          {field.meta.touched &amp;&amp; field.meta.error &amp;&amp;
          displayErrorMessage(field.meta.error)}
        &lt;/div&gt;);
      };
  </code></pre>
  
  <p>Do you have any clue to perform that simple action ? Be indulgent I am a beginner :)</p>
  
  <p>Thanks a lot for your help :)</p>
  
  <p>EDIT :</p>
  
  <p>Here is the way that I am initializing my form values :</p>
  
  <pre><code>// FormComponent file
  handleInitialize () {
      // TODO: Manage properly user not available case (redux form reason ?)
      if (this.props.user.firstname === undefined) return;
      const initData = {
        'firstname': this.props.user.firstname.toString(),
        'lastname': this.props.user.lastname.toString(),
        'city': this.props.user.city === undefined ? '' : this.props.user.city.toString(),
        'email': this.props.user.email.toString(),
        'ranking': this.props.user.ranking.toString(),
        'telephone': this.props.user.telephone === undefined ? '' : this.props.user.telephone.toString()
      };
      console.log('Ranking', this.props.user.ranking);
      this.props.initialize(initData);
    }
  
    componentDidMount () {
      this.handleInitialize();
    }
  
  ....
  
  export default reduxForm({
    form: 'profile',
    validate: validateProfileForm
  })(ProfileForm);
  </code></pre>