react native country code prefix for text input

Question

Trying to set up a form that takes a customer's address and phone number, but the API only accepts the phone number with the country code attached. So I need to add it in through the code.

I've tried it with my code below, but it seems like it's always leaving out the last number.

export default function ShippingAddressForm(props: Props) {
  let { address, onChangeAddress } = props;
  let [phoneState, setPhoneState] = useState<string>('');

  <TextInput
    label={t('Phone Number')}
    textContentType="telephoneNumber"
    value={phoneState}
    onChangeText={(number) => {
      setPhoneState(number)
      let phone = '+61' + phoneState
      onChangeAddress({ ...address, phone })
    }}
  />
}

Building an app on Expo with react native typescript

Answer 1

Set a state is asynchronous, so it's not immediate it will take some time to change the state of the component. In your code setPhoneState is not await function So phone value update ahead of the phone.

1. solution

use number instead of phoneState

onChangeText={(number) => {
   setPhoneState(number)
   let phone = '+61' + number
   onChangeAddress({ ...address, phone })
}}

2. solution use useEffect

    doSomething(); let phone = '+61' + phoneState; onChangeAddress({...address, phone }); }, [phoneState])

3. solution

use add time delay in code (bad approach)

 onChangeText={(number) => {
       setPhoneState(number)
       setTimeout( ()=>null, 3000);
       let phone = '+61' + number
       onChangeAddress({ ...address, phone })
    }}