React-Select with redux-form value undefined after first submit

Question

I have integrated React-Select (multi) with redux-form. It works if you select a value and submit. However if you need to submit the form again (ie. they had an invalid field) the React-Select(multi) has an array with undefined values.

<Field
  ref={ref => this.refTest = ref}
  className = "form-control"
  name="categories"
  options={
    this.state.categories.map(c => {
      return { value: c.id, label: c.categoryName };
    })
  }
  onBlur={this.onBlur}
  component={multiSelect}
/>

The multiSelect is using this component:

export const multiSelect = (field) => {
console.log(field);
return(
  <div>
    <Select
      name={field.name}
      {...field.input}
      className="section"
      multi={true}
      options={field.options}>
    </Select>
    {field.meta.touched && field.meta.error &&
    <label id="basic-error" className="validation-error-label">This field is required.</label>}
  </div>
);
};

No matter what I do, the second "Submit" click always has an array with undefined for "category".

adam_ adam_ · Accepted Answer · 2018-02-08T04:34:35

After some serious debugging - it was due to how I was performing handleInitialise(). ReduxForm expects arrays of values to be in a specific format, specifically:

[{value: "1", label: "Test"}, ...]

Anyone experiencing 'undefined' values pay careful attention to how you are setting and retrieving values. Avoid mutating the object in both cases as I think this lead to some strange behaviour.

React-Select with redux-form value undefined after first submit

1 Answers