How to use react-phone-input-2 with Typescript

Question

I am new to Typescript but I'm forcing myself to program in it because they say it is "best" practice and beneficial in the long run...

so now I'm trying to use react-phone-input-2

https://www.npmjs.com/package/react-phone-input-2

The example on the page above is for just standard Javascript. I did follow it...the widget does show up...however I can't type anything inside the input... In my editor the onChange attribute/prop of the PhoneInput tag has a red squiggly line under it. When I hover over it shows the following error:

(method) PhoneInputEventsProps.onChange?(value: string, data: {} | CountryData, event: React.ChangeEvent, formattedValue: string): void Type 'Dispatch<SetStateAction>' is not assignable to type '(value: string, data: {} | CountryData, event: ChangeEvent, formattedValue: string) => void'.
Types of parameters 'value' and 'value' are incompatible. Type 'string' is not assignable to type 'SetStateAction'.ts(2322) index.d.ts(26, 5): The expected type comes from property 'onChange' which is declared here on type 'IntrinsicAttributes & PhoneInputProps'

I basically have this at the top:

const [value, setValue] = useState()

Then somewhere in the returned JSX I have:

<PhoneInput
                                    placeholder='Enter phone number'
                                    value={value}
                                    onChange={setValue}
                                    className='block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md'
                                />

How do I adjust the code so the react-phone-input-2 will work for Typescript????

Answer 1

The problem is that you don't give a type or default value to useState. This means the default value is undefined and that is the only type that will be allowed for that state.

That means that the type setValue here is (more or less):

(newValue: undefined) => void

And the type of the onChange prop is:

(
  value: string,
  data: {} | CountryData,
  event: React.ChangeEvent<HTMLInputElement>, formattedValue: string
) => void

So the first argument to onChange will be string, but your setValue function only accepts undefined.

---

To fix it, you just have to give your state a type. Either explicitly:

const [value, setValue] = useState<string | undefined>()

Or by letting the type be inferred from the default value:

const [value, setValue] = useState('') // type inferred from default value

See playground

Answer 2

The error states that you have incompatible types. Usually, the 2nd argument from a useState() return is of type Dispatch<SetStateAction>. The onChange argument requires something else. This minimal change should work:

<PhoneInput
  placeholder='Enter phone number'
  value={value}
  onChange={(newValue) => setValue(newValue)}
  className='block max-w-lg w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md'
/>

Answer 3

const [phoneNumber, setPhoneNumber] = useState<string>('');

const handlerPhoneNumber = (
    value: string,
    data: CountryData,
    event: ChangeEvent<HTMLInputElement>,
    formattedValue: string
    ) => {
        setPhoneNumber(value);
    };


<PhoneInput
    enableAreaCodeStretch
    country="br"                            
    inputProps={{
      name: 'phoneNumber',
    }}
    autoFormat
    regions={['south-america']}
    onlyCountries={['br', 'cl', 'uy', 'co']}
    areaCodes={{
      cl: ['56'],
      uy: ['598'],
      co: ['57'],
      br: ['55'],
    }}
    masks={{
      cl: '.. . ....-....',
      uy: '.. ....-....',
      co: '. ....-....',
      br: '(..) .....-....',
    }}
    specialLabel=""
    value={phoneNumber}
    onChange={handlerPhoneNumber}
    placeholder="Número de telefone"
/>