Cannot read property 'iso2' of undefined

[tsvecak]

Getting following error when resizing after I select country from dropdown

This is how I use it right now
<PhoneInput onChange={this.phoneChange}/>

Error:
Uncaught TypeError: Cannot read property 'iso2' of undefined
    at n.value (index.js:1)
    at finishClassComponent (react-dom.development.js:8389)
    at updateClassComponent (react-dom.development.js:8357)
    at beginWork (react-dom.development.js:8982)
    at performUnitOfWork (react-dom.development.js:11814)
    at workLoop (react-dom.development.js:11843)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at invokeGuardedCallback (react-dom.development.js:187)
    at replayUnitOfWork (react-dom.development.js:11318)
    at renderRoot (react-dom.development.js:11885)
    at performWorkOnRoot (react-dom.development.js:12449)
    at performWork (react-dom.development.js:12370)
    at performSyncWork (react-dom.development.js:12347)
    at requestWork (react-dom.development.js:12247)
    at scheduleWorkImpl (react-dom.development.js:12122)
    at scheduleWork (react-dom.development.js:12082)
    at Object.enqueueSetState (react-dom.development.js:6644)
    at App../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:238)
    at App._this.handleWindowSizeChange (App.js:78)

[tsvecak]

I've managed to trace it down to inputFlagClasses = flag ${country.iso2}

[idandagan1]

same issue

[HermantNET]

same issue

[kwes01]

same issue

[Rish-hap]

same issue

[bl00mber]

I don't have this issue. You should provide environment to reproduce this.

[longprao]

I can consistantly reproduce this error:

1. Use controlled input with Formik and this plugin

<Formik
      enableReinitialize
      initialValues={{
        cellphone: phone || '',
....

<Field name="cellphone">
      {({ field, form }: { field: any; form: FormikProps<any> }) => {
        const handleChange = (value: string) => form.setFieldValue(name, value);

        return (
          <ReactPhoneInput
            value={field.value}
            onChange={handleChange}
            preferredCountries={['ch', 'us']}
            disableAreaCodes={true}
            enableSearchField={true}
            placeholder={placeholder}
          />
        );
      }}
    </Field>

2. Load the form with a model which has cellphone.

3. Load the form again with a model with has empty cellphone value (reinitalize).

4. Crashed with the above info. Happens 100% of the time.

[jeemok]

Any updates on this issue? I have created a pull request for this, @bl00mber can you please have a look when you have time?

[shahab65]

In my case this happens when I don't have "+" in the start of value.
So I changed my handleChange method to this:

 const handleChange = (value: string) => {
      if (!value.startsWith("+")) value = "+".concat(value);
     form.setFieldValue(name, value);
};

and I save phone number with prefix and "+" in database for example: +989787654367

[Taally]

Are there any updates? I want to be able to clear the field, but if I set the value to '', it falls with this error. Although, when it is rendered for the first time with value = '', everything's ok. It happens when the value was something other than '' and then is set to ''.

[copenhaverjf]

I had this problem when converting my app from a pure CRA app to SSR. Initially when rendered server side, the component exhibited this behavior. When I deferred loading (using @loadable/component) the problem went away. I have no idea why this is. Are others experiencing this issue rendering SSR?

[D3press3dd]

if you're using typescript you can solve giving type of any, i dont know why it behave like that, but that was my solution