I am trying to format the value of an input field onChange. I am wanting to add a space after every 4th character (i.e. a credit card number). It is currently clearing the text field after the 5th character (which is technically the space).
This is what I have done and how to reproduce the above.
const [creditCardNumber, setCreditCardNumber] = useState<string>('');
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
let creditNum = e.target.value;
let creditNumSpaced = creditNum.match(/.{1,4}/g);
setCreditCardNumber(creditNumSpaced?.join(' ') ?? '');
};
<Input type='number' onChange={e => handleChange(e)} value={creditCardNumber}