I'm using a package react-phone-number-input I have 2 files : index.tsx, useLogicRegister.ts
I have provided a part of code where I'm getting an error of Type 'string' is not assignable to type 'E164Number'
I have also tried to parse string into phoneNumber but still not working.
const parsedPhone = parsePhoneNumber(phone) || '';
index.tsx file has UI of phoneInput and useLogicRegister.ts file has an interface of props, hooks and handlePhoneChange method.
Here is UI code part of index.tsx
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useLogicRegister } from './useLogicRegister';
import 'react-phone-number-input/style.css';
import PhoneInput from 'react-phone-number-input';
const Register: React.FC = () => {
const navigate = useNavigate();
const {
firstname,
lastname,
email,
password,
phone
} = useLogicRegister(navigate);
}
return (
<PhoneInput
rules={{ required: true }}
placeholder="Enter phone number"
value={phone}
defaultCountry="US"
className="form-control"
onChange={handlePhoneChange}
/>
);
};
export default Register;
Here is useLogicRegister.ts
import { useState } from 'react';
import { NavigateFunction } from 'react-router-dom';
import { login } from '../../../store/authSlice';
import { useDispatch } from 'react-redux';
interface useLogicRegisterProps {
email: string;
phone: string;
password: string;
firstname: string;
lastname: string;
handlePhoneChange: (value: string | undefined) => void;
}
export const useLogicRegister = (navigate: NavigateFunction ): useLogicRegisterProps => {
const dispatch = useDispatch();
const [email, setEmail] = useState('');
const [phone , setPhone] = useState('');
const [password, setPassword] = useState('');
const [firstname, setFirstname] = useState('');
const [lastname, setLastname] = useState('');
const handlePhoneChange = (value: string | undefined) => {
if (value) {
setPhone(value);
}
};
return {
email,
phone,
password,
firstname,
lastname
};
};
You can import E164Number
type alias from the "react-phone-number-input" library. Just Update import to import PhoneInput, { type Value } from 'react-phone-number-input'
. And use this type in interface
interface useLogicRegisterProps {
email: string;
phone: Value;
password: string;
firstname: string;
lastname: string;
handlePhoneChange: (value: Value | undefined) => void;
}
And also update types in implementation, like this
const useLogicRegister = (): useLogicRegisterProps => {
const [phone, setPhone] = React.useState('' as Value)
const handlePhoneChange = (value: Value | undefined) => {
if (value) {
setPhone(value)
}
}
return {
phone,
handlePhoneChange,
}
}