defaultCountry on the PhoneInput component not working with values saved in state

[gitahievans]

Hey.
I am trying to make defaultCountry dynamic by detecting the country in which a person is. Am using serverless function to detect the country and this gives back the country code e.g. "US" or "SA". Apparently the defaultCountry property works with lower case letters so am converting mine to lowercase. Am then saving this country code to state and then using it as the default country on PhoneInput. However the set default country does not appear - it shows US. See code below:

const [defaultCountry, setDefaultCountry] = useState('');

// fetching detected country and saving to state
useEffect(() => {
    (async () => {
      const fetchCountry = await fetch('/api/detect-country-for-phone');
      const countryCode = await fetchCountry.json();
      let lowerCaseCountryCode = countryCode.country.toLowerCase();

      return setDefaultCountry(lowerCaseCountryCode);
    })();
  }, []);

<PhoneInput
            defaultCountry={defaultCountry}
            value={phoneNumber}
            hideDropdown={true}
            onChange={handlePhoneChange}
       ...
/>

I have done tests to ensure the country is detected and saved to state, since on logging to the console it is displayed. I have also confirmed the country code is of type string which is what is expected on defaultCountry. What could I be missing?

[ybrusentsov]

@gitahievans Hey 👋
defaultCountry only prefills input if provided value prop is empty.
If you want to change country programmatically you can use ref.setCountry function:

const ref = useRef<PhoneInputRefType>(null);

// fetching detected country and saving to state
useEffect(() => {
  (async () => {
    const fetchCountry = await fetch('/api/detect-country-for-phone');
    const countryCode = await fetchCountry.json();
    let lowerCaseCountryCode = countryCode.country.toLowerCase();

    ref.setCountry(lowerCaseCountryCode);
  })();
}, []);

return (
  <div>
    <PhoneInput
      value={phoneNumber}
      hideDropdown={true}
      onChange={handlePhoneChange}
      ...
    />
  </div>
);

[gitahievans]

Hi @goveo, thank you for getting back.
On the above solution, am having challenge importing PhoneInputRefType. I get the error "Module not found:". Below is the line I added to import it, is it correct:

import PhoneInputRefType from 'react-international-phone/build/components/PhoneInput/PhoneInput';
...
...
const ref = useRef<PhoneInputRefType>(null);

Also on the line ref.setCountry(lowerCaseCountryCode); I get the error "ref.setCountry is not a function." Is there something I have missed here? Like an import or something?

Thanks.

[ybrusentsov]

@gitahievans Oh, sorry, I forgot to export PhoneInputRefType 🤦‍♂️
Should be fixed in v4.2.1:

import { PhoneInputRefType } from 'react-international-phone';
// ...
const ref = useRef<PhoneInputRefType>(null);

https://react-international-phone.vercel.app/docs/Usage/PhoneInput#ref-forwarding