Formatting and Setting Phone Number in input field in reactjs

Question

Hello I am quite a beginner in reactjs.

My current use case is very simple, I have an input field that is to accept a phone number and format it as the user is typing.Unfortunately it turns out that the input fields freezes and refuses to accept further inputs as I start formatting

Here is my code

import { parsePhoneNumberFromString } from 'libphonenumber-js';

export default function UpdatePhoneDetails() {
  const [phoneNumber, setPhoneNumber] = useState('');

  const updatePhoneNumber = (value) => {
    const newPhoneNumber = parsePhoneNumberFromString(value, 'NG');
    if (newPhoneNumber) {
      const formattedNumber = newPhoneNumber.number;
      const valid = newPhoneNumber.isValid();
      if (valid) {
        setPhoneNumber(formattedNumber); //The input field seems to be freezing here
      }
    }
  };

  return (
     updatePhoneNumber(event.target.value)}
    />
  );
}

Thanks for your anticipated help.

user_2304474 · Answer

updatePhoneNumber function only updates value if phone number is valid so when the user is still typing it won't let you do any changes.

You can set error if phone number is invalid and replace text with newPhoneNumber.number otherwise

const { TextField } = window.MaterialUI;
const { useState, useEffect } = React;
const { parsePhoneNumberFromString } = libphonenumber;
//console.log(Object.keys(libphonenumber));

const App = () => {
  const [text, setText] = useState('');
  const [error, setError] = useState(null);

  const onChange = ({target: {value}}) => {
    let valid = true;
    const newPhoneNumber = parsePhoneNumberFromString(value, "NG");
  
    if (newPhoneNumber) {
      valid = newPhoneNumber.isValid(); 
      
      if(valid) {
        value = newPhoneNumber.number;
      }
    }
    
    setError(!valid);
    setText(value);
  }

return 
  
  

}

ReactDOM.render(
    ,
    document.getElementById('root')
  );

Formatting and Setting Phone Number in input field in reactjs

1 Answers