score:16

Accepted answer

To make separate custom component that handles drop down select, I needed to include the 'input' props 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>

Related Query

More Query from same tag