formatting number in input react

Question

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?

@Chris He is converting string to Number -> `const x = Number(val);` — Alwaysblue, Jan 31 '19 at 11:50
`updateValue` is part of the useState `hook` allowing me to update the state — peter flanagan, Jan 31 '19 at 11:51
[react-number-format](https://github.com/s-yadav/react-number-format) — Şivā SankĂr, Jan 31 '19 at 11:53
@ŞivāSankĂr I don't really want to use a library for this — peter flanagan, Jan 31 '19 at 11:54
The problem is that once you convert using `toLocaleString` the next time the `val` will contain the `,` and `.` of the string. And that cannot be converted to `Number` accurately because there is no `fromLocaleNumber` . You will need to have an input for typing and one for showing the formatted number and somehow hide one or pass the user keypresses from one to the other. — Gabriele Petrioli, Jan 31 '19 at 11:56
@GabrielePetrioli, yeah this is what I was thinking, you know how to implement this? — peter flanagan, Jan 31 '19 at 12:09
Try `const update = (val: any) => { var formatter = new Intl.NumberFormat("en-US"); updateValue(formatter.format(val.replace(/,/g, ""))); };` — Şivā SankĂr, Jan 31 '19 at 12:15
nice @ŞivāSankĂr if you want to post this as an answer I Will accept — peter flanagan, Jan 31 '19 at 12:22

Şivā SankĂr · Answer 1 · 2019-02-01T00:44:28.053

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) => {
   /**
   https://stackoverflow.com/questions/35535688/stop-cursor-jumping-when-formatting-number-in-react
   https://github.com/facebook/react/issues/955
   */
   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 :

score 0 · Answer 2 · answered Jan 31 '19 at 12:53

0

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, '');

https://codesandbox.io/s/r0vm8nxvjo

answered Jan 31 '19 at 12:53

Renzo Calla

7,486
2
22
37

2

what if there is a decimal point in there ? and what about locales where the `.` is used for the thousands and the `,` is used for the decimal ? – Gabriele Petrioli Jan 31 '19 at 13:09

formatting number in input react

2 Answers2