Changing 'countriesData' prop does not update items in 'FlagDropDown' component

[thomaswolff]

Hi,

I'm using the IntlTelInput component in my project which supports two languages: English and Norwegian.

• I have created two resource files which contains translations for the countriesData which is displayed in the FlagDropDown component: countriesData-en and countriesData-nb.
• When the language in the app changes, I'm updating the language state in my component.
• In the render function of my component I'm setting the countriesData prop for the IntlTelInput according to the chosen language.

I can see in the React Chrome Extension that the countriesData prop is updated in IntlTelInput. However, the items in the FlagDropDown component are not updated.

In the screenshot below, you can see the FlagDropDown and the first entry in the CountriesData prop when English is the selected language in my app. So far so good. These values match.

When changing language to Norwegian, the countriesData prop is updated (as seen in the screenshot below). However, the items in the FlagDropDown component are not updated.

Excerpts from my code Imports of resource files countriesData-en and countriesData-nb. countriesData-en is just a copy of defaultCountriesData in AllCountries.js, whereas countriesData-nb has Norwegian translations for the country names.

import { countriesDataEn } from "./localization/countriesData-en";
import { countriesDataNb } from "./localization/countriesData-nb";

My component's render function

render() {
    const countriesData = this.state.language === "nb" ? countriesDataNb : countriesDataEn;

    return(
        <IntlTelInput
            countriesData={countriesData}
            utilsScript={"libphonenumber.js"}
            preferredCountries={["no"]}
            separateDialCode={true}
        />
    )
}

Any help on this matter would be much appreciated!

[tomegz]

I guess there is nothing wrong with your code, if think I already had an issue with different prop - I passed it and IntlTelInput didn't seem to update. Luckily there is something you can do on your side:

 <IntlTelInput
    key={this.state.language}
    countriesData={countriesData}
    utilsScript={"libphonenumber.js"}
    preferredCountries={["no"]}
    separateDialCode={true}
  />

Just pass in key prop (it's a special React prop for every component) that will change every time time the language changes. Preferably let it be unique, but for now passing this.state.language should do just fine. When key prop changes React knows to rerender the component.

[thomaswolff]

I guess there is nothing wrong with your code, if think I already had an issue with different prop - I passed it and IntlTelInput didn't seem to update. Luckily there is something you can do on your side:

 <IntlTelInput
    key={this.state.language}
    countriesData={countriesData}
    utilsScript={"libphonenumber.js"}
    preferredCountries={["no"]}
    separateDialCode={true}
  />

Just pass in key prop (it's a special React prop for every component) that will change every time time the language changes. Preferably let it be unique, but for now passing this.state.language should do just fine. When key prop changes React knows to rerender the component.

@tomegz Setting the key prop did indeed force the component to rerender, and the items in the dropdown list were updated. Thanks for the tip!

It would still be great if IntlTelInput would rerender if the object passed to the countriesData prop changed.

[tomegz]

@thomaswolff this is true. Some other props sadly share the same behaviour

[nunuh89]

I guess there is nothing wrong with your code, if think I already had an issue with different prop - I passed it and IntlTelInput didn't seem to update. Luckily there is something you can do on your side:

 <IntlTelInput
    key={this.state.language}
    countriesData={countriesData}
    utilsScript={"libphonenumber.js"}
    preferredCountries={["no"]}
    separateDialCode={true}
  />

Just pass in key prop (it's a special React prop for every component) that will change every time time the language changes. Preferably let it be unique, but for now passing this.state.language should do just fine. When key prop changes React knows to rerender the component.

Thanks! I finally get it to work passing the changing value to key!

[tomegz]

Remember that this is just a hack to get around libraries' limitations. It'd be best if the issue was fixed in the library itself