so i need to reset the input value after changing the country but it keeps the same value , i'am using react functional ponents , and i'am stuck at this point

this is my code below

<PhoneInput
         country={ip.toLocaleLowerCase()}
         value={phone}
         countryCodeEditable={false}
         specialLabel={""}
         enableSearch={true}
         masks={phoneFormat}
         searchPlaceholder={""}
         placeholder={t("register:phone")}
         inputStyle={{
           paddingTop: 26,
           paddingRight: 14,
           paddingBottom: 26,
           paddingLeft: 58,
           width: "100%",
           zIndex: 1,
           backgroundColor: "#F3F6F9",
           border: "none",
         }}
         onChange={(e) => {
           setPhone(e);
           setErrors({ ...errors, phone: false });
         }}

Thanks for answering

so i need to reset the input value after changing the country but it keeps the same value , i'am using react functional ponents , and i'am stuck at this point

this is my code below

<PhoneInput
         country={ip.toLocaleLowerCase()}
         value={phone}
         countryCodeEditable={false}
         specialLabel={""}
         enableSearch={true}
         masks={phoneFormat}
         searchPlaceholder={""}
         placeholder={t("register:phone")}
         inputStyle={{
           paddingTop: 26,
           paddingRight: 14,
           paddingBottom: 26,
           paddingLeft: 58,
           width: "100%",
           zIndex: 1,
           backgroundColor: "#F3F6F9",
           border: "none",
         }}
         onChange={(e) => {
           setPhone(e);
           setErrors({ ...errors, phone: false });
         }}

Thanks for answering

• javascript
• reactjs

Share Improve this question Follow asked Aug 9, 2022 at 10:05 Reda loutfiReda loutfi 3911 silver badge77 bronze badges 2

• 1 You can create a useEffect hook that will setInput(""), with country state as a dependency – Aman Commented Aug 9, 2022 at 10:21
• 1 defination of onChange is like this: onChange={(phone, country) => { }}. so you can set the initial value of country in state and whenever it changes you can simply reset your value of phone. – Talha Fayyaz Commented Aug 9, 2022 at 10:25

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Is ip stored in state somewhere? You might have a const [ip, setip] = useState() somewhere, and you then set ip in the change handler above to:

onChange={(e) => {
           setPhone(e);
           setErrors({ ...errors, phone: false });
           setIp(e.target.value)
         }}

I did it like this. It's working fine for me.

const CustomPhoneNumberInput = () => {
  const [number, setNumber] = useState('');
  const [country, setCountry] = useState('us');
  const handleOnChange = (value, countryObj, e, formattedValue) => {
    if (country === countryObj?.name) {
      setNumber(formattedValue);
    } else {
      setNumber('');
      setCountry(countryObj?.countryCode);
    }
    console.log(value, countryObj, formattedValue);
  };

  return (
    <Box>
      <PhoneInput
        enableSearch
        countryCodeEditable={false}
        country={country}
        value={number}
        onChange={(value, countryObj, e, formattedValue) =>
          handleOnChange(value, countryObj, e, formattedValue)
        }
        specialLabel='Phone*'
      />
    </Box>
  );
};