Initial value won't load in redux-form.
See original GitHub issueHi,
I’m using this together with redux-form v6, and i cannot make it load initial values:
I first tried this, as suggested in docs:
import Phone from 'react-phone-number-input'
import React from 'react';
import { Field } from 'redux-form';
import 'react-phone-number-input/style.css';
export default class MyPhoneInput extends React.Component {
render() {
return (<Field name={props.name} component={Phone} />)
}
}
But once i select a country from dropdown, i get error in console:
So i tried wrapping it myself for redux-form like this:
import Phone from 'react-phone-number-input'
import React from 'react';
import { Field } from 'redux-form';
import 'react-phone-number-input/style.css';
export default class MyPhoneInput extends React.Component {
constructor(props) {
super(props);
this.fieldInput = this.setupInput();
}
setupInput() {
return (field) => {
return (
<Phone {...field.input} />
);
};
}
render() {
return (<Field name={props.name} component={this.fieldInput} />)
}
}
This made it work on inputing. I could properly select a country,enter the phone number, and pass it down to API in proper format. So far so good.
Once i load the same redux-form, with initialValues passed in, Nothing is prepopulated in the input, no country and no number. I console logged field.input
and it properly contains all the events (onChange, onBlur, etc), and has a value
property that is a valid number (+441632960293). All other inputs that i have are properly populated.
React version: 15.6.1 Redux version: 5.0.5 Redux-form version: 6.8.0
Edit: Looks like the country is properly preselected, but the number input is empty.
Issue Analytics
- State:
- Created 5 years ago
- Comments:17 (9 by maintainers)
So, the reason
onChange
wasn’t passed to the component is that<Field/>
doesn’t pass it and instead it passes onlyinput: { value, onChange }
andmeta: { ... }
objects as properties. https://redux-form.com/6.0.0-rc.4/docs/api/field.md/ Therefore, you’ll have to wrap this component in a specialReduxFormPhoneInput
wrapper like this: