React-select: Not able to set initial value with Redux Form

[vicke4]

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!

[vicke4]

@MaxInMoon Thanks a lot. It works!!!!

[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.

[narayanchoudhary]

@MaxInMoon Thanks a lot. It works!!!!
didn't work for me

[vicke4]

didn't work for me

Maybe you're using v2. I am using v1 and @MaxInMoon's solution fixed my issue.

[narayanchoudhary]

@vicke4
Finally, it worked for me.
1) When it not worked
I was passing the initialValues object as { party: '67fhfkdrtoop' }
2) When it Worked
I Passed the initialValues object as { party: { value: '67fhfkdrtoop', label: 'thanos' } }

[marxyes]

@vicke4
Finally, it worked for me.

1. When it not worked
   I was passing the initialValues object as { party: '67fhfkdrtoop' }
2. When it Worked
   I Passed the initialValues object as { party: { value: '67fhfkdrtoop', label: 'thanos' } }

It worked for me