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
– Alwaysblue, Commented Jan 31, 2019 at 11:50
updateValue is part of the useState hook allowing me to update the state — peter flanagan
– peter flanagan, Commented Jan 31, 2019 at 11:51
@ŞivāSankĂr I don't really want to use a library for this — peter flanagan
– peter flanagan, Commented Jan 31, 2019 at 11:54
Try const update = (val: any) => { var formatter = new Intl.NumberFormat("en-US"); updateValue(formatter.format(val.replace(/,/g, ""))); }; — Sivasankar
– Sivasankar, Commented Jan 31, 2019 at 12:15

Sivasankar · Accepted Answer · 2019-02-01 00:44:28Z

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 :

Renzo Calla · Accepted Answer · 2019-01-31 12:53:16Z

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, 2019 at 12:53

Renzo Calla

7,7362 gold badges25 silver badges39 bronze badges

1 Comment

Gabriele Petrioli Over a year ago

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 ?

Collectives™ on Stack Overflow

formatting number in input react

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related