Redux-form custom select not using first value

Question

I'm using react-redux and redux-form for my new project. When I create a custom select Field, it never passes the first option value (that is already "selected") to the handleSubmit function. Only when I manually select avalue, it passes the option value correctly.

Custom select:

const Select = ({ input, options, disabled }) => (
  <div>
    <select {...input} disabled={disabled}>
      { options.map(option =>
        <option key={option.value} value={option.value}>
          {option.label}
        </option>
      )}
    </select>
  </div>
);

Form Component:

function RegisterForm({ handleSubmit, titles }) {
  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="title">Title</label>
      <Field name="title" options={titles} component={Select} />

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

RegisterForm.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  titles: PropTypes.array.isRequired,
};

export default reduxForm({
  form: 'register'
})(RegisterForm);

Do I have to initialize the select from the redux state? Or is there another way to force the first value to be the initial value?

Thanks in advance!

Answer 1

There are several ways to initialize your form.

1. Use the initializeForm function provided by redux-form, which is passed by props:

componentWillMount () {
  this.props.initialize({
    title: 'Codifly'
  });
}

See docs: http://redux-form.com/6.4.3/docs/api/ActionCreators.md/

2. Pass default values using initialValues:

export default reduxForm({
  form: 'register',
  initialValues: {
    title: 'Codifly'
  }
})(RegisterForm);

http://redux-form.com/6.4.3/docs/api/Props.md/

I hope this helps!