FormTestComponent.js

/* eslint-disable flowtype/require-parameter-type */
/* eslint-disable flowtype/require-return-type */
import React, { Component } from 'react';
import { Field } from 'redux-form';
import { reduxForm } from 'redux-form';

/* Trying to use a custom component for a <select>.  Can't get it to work with redux-form */
const Select = props => {
  const name = props.name || props.input.name;
  console.log(`Select ${name} called with `, props);
  const { opt1, opt2 } = props.options;
  return (
    <select>
      <option value={opt1}>{opt1}</option>
      <option value={opt2}>{opt2}</option>
    </select>
  );
};
const Options = props => {
  console.log(`Options ${props.name} called with `, props);
  const { opt1, opt2 } = props.options;
  return (
    <div>
      <option value={opt1}>{opt1}</option>
      <option value={opt2}>{opt2}</option>
    </div>
  );
};

class FormTestComponent extends Component {
  componentDidMount = () => {
    console.log("CDM in FormTestComponent");
  }
  render = () => (
    <div>
      <h1>The Form</h1>
      <form>
        <Field name="textField" component="input" />

        {/* This <select> works: renders ok and store is updated
          when options are selected */}
        <Field
          name="select-1"
          component="select"
        >
          <option value="A">A</option>
          <option value="B">B</option>
        </Field>
    
    
        {/* Doesn't work: select has no options on screen */}
        <Field name="select-2" component="select">
          <select>
            <option value="C">C</option>
            <option value="D">D</option>
          </select>
        </Field>
    
    
        {/* Doesn't work: renders ok but store is not updated
        when options are selected */}
        <Field
          name="select-3"
          options={{ opt1: 'E', opt2: 'F' }}
          component={Select}
        />
    
    
        {/* Doesn't work: select has no options on screen */}
        <Field name="select-4" component="select">
          <Select
            name="select-4"
            options={{ opt1: 'G', opt2: 'H' }}
          />
        </Field>
        {/* Doesn't work: select has no options on screen */}
        <Field name="select-5" component="select">
          <Options
            name="select-5"
            options={{ opt1: 'K', opt2: 'L' }}
          />
        </Field>

        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

export default reduxForm({form: 'test-form'})(FormTestComponent);