formatting number in input react

I have made an Input component. If it is a number I want to format it correctly, like a currency. I.e. 4000 would be 4,000.

Here is a codesandbox.

I am having issues with displaying and updating this.

<Input initialValue={'400000000'} isNumber={true} /> 

My Input component looks like this.

type Props = { initialValue?: string; isNumber?: boolean; }; const Input = ({ initialValue = '', isNumber }: Props) => { const [value, updateValue] = useState(initialValue); const update = (val: any) => { if (isNumber) { const x = Number(val); updateValue(x.toLocaleString()); } else { updateValue(val); } }; return ( <StyledInput type="text" value={value} onChange={e => update(e.target.value)} /> ); }; 

I am seeing an error NaN in my input component. Anyone have any ideas?

2 Answers

Javascript has a number formatter (part of the Internationalization API).

 // Quick Solution With Intl.NumberFormat const update = (val: any) => { var formatter = new Intl.NumberFormat("en-US"); // Intl language tag, updateValue(formatter.format(val.replace(/,/g, ""))); //Remove ',' to format number again }; 

Code Snippet:

// Intl.NumberFormat With React State Update var currentVal = 0; ... const update = (event: any) => { /** */ const caret = event.target.selectionStart const element = event.target window.requestAnimationFrame(() => { element.selectionStart = caret element.selectionEnd = caret }) // -- Stop cursor jumping when formatting number in React var val = event.target.value.replace(/(\..*)\./g, '$1') //Replace Multiple Dot(.) var x = Number(val.replace(/,/g, "")); if (currentVal != x) { var formatter = new Intl.NumberFormat("en-US", { minimumFractionDigits:2}); currentVal = formatter.format(x); updateValue(currentVal); }else{ updateValue(val); } }; return (<input type="text" value={value} onChange={e => update(e)} />); 

Note : Code Snippet gives you an idea to format numbers, You need to handle few more use-cases for production.

Also check the react-number-format, Which may suit for your application.

Reference :

• Intl.NumberFormat vs Number.prototype.toLocaleString
• How can I format numbers as dollars currency string in JavaScript?
• Intl.NumberFormat | MDN

The problem is in

const x = Number(val); 

when you evaluate Number("32,423,343"), a string including commas Js will throw an error... The correct way would be sending the number without commas.. Number("32432343") To solve it you can add this line to remove the commas, before evaluating to a Number..

val = val.replace(/,/g, '');