title: How to Create Custom Dropdown Field Component with Redux-Form V6?
body: <p>I've got an app that will be form-heavy, and I'd like as much control as possible, while using as few dependencies as I can. To do so, I'd like to take advantage of redux-form v6's custom Field component API and make a bunch of custom components that I can drop in at will. One of these components is a drop down select.</p>
  
  <p>The problem is the custom drop down component does not connect to state, even though it renders OK. </p>
  
  <p>In the docs, the examples accomplish this like:</p>
  
  <pre><code>&lt;Field name="favoriteColor" component="select"&gt;
    &lt;option&gt;&lt;/option&gt;
    &lt;option value="#ff0000"&gt;Red&lt;/option&gt;
    &lt;option value="#00ff00"&gt;Green&lt;/option&gt;
    &lt;option value="#0000ff"&gt;Blue&lt;/option&gt;
  &lt;/Field&gt;
  </code></pre>
  
  <p>I'm looking for a plug-and-play approach where I can drop in a component, and feed into the props an array of data:</p>
  
  <p><strong>Form.js</strong>:</p>
  
  <pre><code>      &lt;div className="form-group"&gt;
          &lt;label htmlFor="dropDownSelect"&gt;Select an Option&lt;/label&gt;
          &lt;Field
            name="dropDownSelect"
            component={DropDownSelect}
            people={people}
            className="form-control"
          &gt;
          &lt;/Field&gt;
        &lt;/div&gt;
  </code></pre>
  
  <p><strong>DropDownSelect.js:</strong></p>
  
  <pre><code>import React from 'react';
  
  import styles from './styles.css';
  
  class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function
    renderSelectOptions = (person) =&gt; {
      return (
        &lt;option key={person} value={person}&gt;{person}&lt;/option&gt;
      );
    }
  
    render() {
      return (
        &lt;select&gt;
          {this.props.people.map(this.renderSelectOptions)}
        &lt;/select&gt;
      );
    }
  }
  
  
  export default DropDownSelect;
  </code></pre>
  
  <p>When I check Redux DevTools, the field's value never populates when interacting with the dropdown:</p>
  
  <p><a href="https://i.stack.imgur.com/P7OSR.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/P7OSR.jpg" alt="enter image description here"></a></p>
  
  <p>I picked a value for both fields, but only 'effDate' populates a value, while 'dropDownSelect' remains as a registered field with no value. </p>
  
  <p><strong>Edit:</strong></p>
  
  <p>Based off the example, I guess the way to go about this is like: </p>
  
  <pre><code>function DropDownSelect(person) {
    return (
      &lt;option key={person} value={person}&gt;{person}&lt;/option&gt;
    );
  }
  
  export default DropDownSelect;
  
  
        &lt;div className="form-group"&gt;
          &lt;label htmlFor="dropDownSelect"&gt;Select an Option&lt;/label&gt;
          &lt;Field
            name="dropDownSelect"
            component="select"
            // component={DropDownSelect}
            // people={people}
            className="form-control"
          &gt;
            {people.map(DropDownSelect)}
          &lt;/Field&gt;
  </code></pre>
  
  <p>This works for now, though it would be ideal if I could implement this as a completely separate component (as outlined in the initial question), so I can take advantage of lifecycle hooks in the case the field will depend on other fields.</p>