title: Set <select> default value with redux-form in React
body: <p>This is above my paygrade. I was trying to put a dropdown list in <code>redux-form</code> and have it initialize with a default value like its done for <code>&lt;input&gt;</code>.</p>
  
  <p>The custom drop down component is setup as follows:</p>
  
  <pre><code>const renderDropDownField = ({ input, label, values, defaultValue }) =&gt; (
    &lt;Container&gt;
      &lt;Row&gt;
        &lt;Col sm="6"&gt;
          &lt;label className="input-label"&gt;{label}&lt;/label&gt;
        &lt;/Col&gt;
        &lt;Col sm="6"&gt;
          &lt;Row&gt;
            &lt;select className="dropdown-list" {...input} &gt;
              {values.map((value, index) =&gt; (
                &lt;option key={value} value={value}&gt;{value}&lt;/option&gt;
              ))}
            &lt;/select&gt;
          &lt;/Row&gt;
        &lt;/Col&gt;
      &lt;/Row&gt;
    &lt;/Container&gt;
  </code></pre>
  
  <p>Then the field in the form </p>
  
  <pre><code>  &lt;Field
      name="shuffle"
      component={renderDropDownField}
      label="SHUFFLE [ YES/NO ]:"
      values={props.list.shuffle.values}         // from parent
      defaultValue={props.list.shuffle.default}  // from parent
    /&gt;
  </code></pre>
  
  <p>The <code>defaultValue</code> prop in the field is extra because the initial values come from the  <code>defaultValues</code> from <code>mapStateToprops</code> </p>
  
  <pre><code>const mapStateToProps = (state, props) =&gt; ({
    enableReinitialize: false,
    keepDirtyOnReinitialize: true,
    initialValues: props.defaultValues
  })
  </code></pre>
  
  <p>I have tried every permutation of setting the <code>value</code>, <code>defaultValue</code>, and <code>selected</code> attribute in the <code>&lt;select&gt;</code> or <code>&lt;option&gt;</code> tag with no luck. </p>
  
  <blockquote>
    <p>How can we set the initial value, or the default value in a drop down list? </p>
  </blockquote>
  
  <p>The actual form value is set correctly but the option is not set in the gui.  </p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Just to clarify for anyone else looking at this thread in the future. The <code>defaultValue</code> prop is not necessary at all in the <code>renderDropDownField</code> function. Nor do you have to specify an attribute <code>defaultValue</code> in the <code>&lt;select&gt;</code> or <code>&lt;option&gt;</code>.</p>
  
  <p>Say in the <code>{ initialValues: props.defaultValues }</code> one is passing all the default values for all fields including the default value for our <code>&lt;select&gt;</code> component. Example: </p>
  
  <pre><code>this.state = {
    defaultValues: {
      shuffle: "No"
    }
  };
  </code></pre>
  
  <p>and the options for the list like so</p>
  
  <pre><code>this.dropdownListOptions = {
      shuffle: {
        values: ["Yes","No"]
      }
    };
  </code></pre>
  
  <p>Then the <code>redux-form</code> will automatically load the default value in the form and gui as long as the default value i.e.: in the state matches one of the values in the option list. This was my problem. I had a value in the state which was different than all values in the option.  The answer below help me troubleshoot it. </p>