Describe the bug
There is a fatal error when switching between custom country lists in the PhoneInput component. For example, if I want to use only North American countries:
const countries = defaultCountries.filter(country =>
['ca', 'us', 'mx'].includes(country[1])
);
and switch between them during runtime:
countries = {condition ? countries : defaultCountries}
In my Nextjs 13.4.9 environment I experience this error:
Create a React component that implements <Phone Input />
Pass a conditional country list to the countries prop.
In a session, switch between country lists by toggling the condition.
See error
Expected behavior
No fatal errors when switching between country lists.
Desktop:
OS: Windows 11
Browser: tested on newest versions of Firefox, Chrome and Safari
Additional context
I tested this error in a Create React App as well as Nextjs with similar results. I believe this error has to do with improper indexing given to React. The workaround I'm currently using is to duplicate the component, and pass in the proper component at runtime:
Describe the bug There is a fatal error when switching between custom country lists in the PhoneInput component. For example, if I want to use only North American countries:
and switch between them during runtime:
In my Nextjs 13.4.9 environment I experience this error:
To Reproduce Steps to reproduce the behavior:
<Phone Input />
Expected behavior No fatal errors when switching between country lists.
Desktop:
Additional context I tested this error in a Create React App as well as Nextjs with similar results. I believe this error has to do with improper indexing given to React. The workaround I'm currently using is to duplicate the component, and pass in the proper component at runtime: