How to create a custom dropdown field component using Redux-Form V6?

Question

I have an application that will be heavy, and I would like as much control as possible, using as few dependencies as possible. To do this, I would like to take advantage of the redux-form v6 component component API and create a bunch of custom components that I can choose as I like. One of these components is the drop down box.

The problem is that the custom dropdown component does not connect to the state, even if it displays OK.

In the documents, examples run like this:

<Field name="favoriteColor" component="select"> <option></option> <option value="#ff0000">Red</option> <option value="#00ff00">Green</option> <option value="#0000ff">Blue</option> </Field> 

I am looking for an approach with a plug-in, where I can go into the component and pass an array of data to the props:

Form.js

  <div className="form-group"> <label htmlFor="dropDownSelect">Select an Option</label> <Field name="dropDownSelect" component={DropDownSelect} people={people} className="form-control" > </Field> </div> 

DropDownSelect.js:

 import React from 'react'; import styles from './styles.css'; class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function renderSelectOptions = (person) => { return ( <option key={person} value={person}>{person}</option> ); } render() { return ( <select> {this.props.people.map(this.renderSelectOptions)} </select> ); } } export default DropDownSelect; 

When I check Redux DevTools, the field value is never populated when interacting with the dropdown menu:

I selected a value for both fields, but only "effDate" fills the value, and "dropDownSelect" remains as the registered field without a value.

Edit:

Based on this example, I think it can be done like this:

 function DropDownSelect(person) { return ( <option key={person} value={person}>{person}</option> ); } export default DropDownSelect; <div className="form-group"> <label htmlFor="dropDownSelect">Select an Option</label> <Field name="dropDownSelect" component="select" // component={DropDownSelect} // people={people} className="form-control" > {people.map(DropDownSelect)} </Field> 

This works for now, although it would be ideal if I could implement it as a completely separate component (as indicated in the initial question), so I can use the lifecycle hooks in case the field depends on other fields.

Answer 1

To create a separate custom component that processes the drop-down list, I need to enable the "input" details to connect it to the form reducer:

Custom component:

 /** * * DropDownSelect * */ import React from 'react'; import styles from './styles.css'; class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function renderSelectOptions = (person) => ( <option key={person} value={person}>{person}</option> ) render() { const { input, label } = this.props; return ( <div> {/* <label htmlFor={label}>{label}</label> */} <select {...input}> <option value="">Select</option> {this.props.people.map(this.renderSelectOptions)} </select> </div> ); } } // function DropDownSelect(person) { // return ( // <option key={person} value={person}>{person}</option> // ); // } DropDownSelect.propTypes = { people: React.PropTypes.array, input: React.PropTypes.object, label: React.PropTypes.string, }; export default DropDownSelect; 

field:

  <div className="form-group"> <label htmlFor="dropDownSelect">Select an Option</label> <Field name="dropDownSelect" // component="select" label="dropDownSelect" component={DropDownSelect} people={people} className="form-control" > {/* {people.map(DropDownSelect)} */} </Field> </div>