Not able to set initial value with Redux Form

So, I’m trying to set an initial value for my Select tag using Redux Form field.

Redux Field tag,

<Field
    name="vehicle"
    label="Vehicle"
    options={options}
    component={this.renderSelect}
/>

Function

renderSelect(props) {
    return (
        <Select  
            {...props.input}
            onBlur={() => { props.input.onBlur(props.input.value); }}
            options={props.options}
            placeholder={props.label}
            resetValue={props.meta.initial}
            simpleValue
        />
    );
}

Redux form maps to state

function mapStateToProps(state, initialProps) {
    return {
        initialValues: {
             vehicle: truck,
        },
    };
}

This is what I’ve tried.

The following code block successfully sets the Select tag to truck but while submitting the form I’m not getting {vehicle: 'truck'} in form values.

renderSelect(props) {
    return (
        <Select
            {...props.input}
            value={props.input.value ? props.input.value : props.meta.initial }
            onBlur={() => { props.input.onBlur(props.input.value); }}
            options={props.options}
            placeholder={props.label}
            resetValue={props.meta.initial}
            simpleValue
        />
    );
}

By including this.props.change(props.input.name, props.meta.initial); in rederSelect method I’m able to get the form value while submitting form but it leads to,

Warning: setState(...): Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state.

What is the clear way to make the truck as an initial value of React select as well as getting it while submitting a form??

[MaxInMoon]

Try to add enableReinitialize: true and/or keepDirtyOnReinitialize: true in your form export declaration:

export default reduxForm({
  form: 'formName',
  keepDirtyOnReinitialize: true,
  enableReinitialize: true, // fix issue "Redux Form - initialValues not updating with state" (http://stackoverflow.com/questions/38881324/redux-form-initialvalues-not-updating-with-state)
})(MyForm);

and try this onChange/onBlur behaviour:

const SelectAsync = (props) => {
  const { input, meta } = this.props;
  return (
    <Select.Async
      name={input.name}
      value={input.value}
      onChange={input.onChange}
      onBlur={() => input.onBlur(input.value)}
    >
  )
}

let me now!

[bitclaw]

Also worth mentioning is that you should also add updateUnregisteredFields: true.

i.e:

export default reduxForm({
  form: 'formName',
  keepDirtyOnReinitialize: true,
  enableReinitialize: true,
  updateUnregisteredFields: true
})(MyForm);

From official docs:

updateUnregisteredFields : boolean [optional] Used in combination with keepDirtyOnReinitialize. Will update every initialValue which is still pristine. Normally only registered Fields will be updated. In most cases, this option should be set to true to work as expected and avoid edge cases. It defaults to false because of non-breaking backwards compatibility.