Popup closes byself when you try to type something at PhoneInput (React and React-phone-number-input)

89 Views Asked by At
TypeError: Cannot read properties of undefined (reading 'name') 

and

Uncaught TypeError: Cannot read properties of undefined (reading 'name')

I belive the problem is when the PhoneInput call function "OnChange" but I don't know how to fix it.

GitHub Repository

Code src: landing-page/resources/js/components/contact-form/contact-form.jsx

const inputs = [
..., {
        id: "input-phone",
        name: "phone",
        type: "text",
        errorMessage: "Por favor, preencha o seu testes",
        pattern: "^[0-9]{2} [0-9]{4}-[0-9]{4}$",
        label: "Celular",
      },
const handleSubmit = (e) => {
    e.preventDefault();
};

const onChange = (e) => {
        setValues({ ...values, [e.target.name]: e.target.value });
        console.log(values);
};
return(
<PhoneInput
        key={item.id}
        {...item}
        international
        withCountryCallingCode
        countryCallingCodeEditable={false}
        error={true}
        defaultCountry="BR"
        flags={flags}
        flagUrl="https://flag.pk/flags/4x3/{xx}.svg"

        value={values[item.name]}
        onChange={onChange}
/>
);
1

There are 1 best solutions below

0
Bianca Emi On

The problem was solved. I create a new function to call at "onChange".

const onPhoneChange = (phoneNumber) => {
   setValues({ ...values, phone: phoneNumber });
}

and

<PhoneInput
  ...
  onChange={onPhoneChange};
/>