How to Create Custom Dropdown Field Component with Redux-Form V6?
<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>