how to automatically add commas to numbers being typed

Question

I have a calculator. How do I add commas to an input, so when I type 40000 it would automatically display 40,000? (The number should still stay as 40000 in order to do the right calculation.)

This is how I get the value of the inputs:

 handleStateChange = (e) => {
        const { target: { name, value } } = e
        this.setState({ [name]: value })
        }

Possible duplicate of In React, how to format a number with commas? — bitsapien
– bitsapien, Commented Feb 25, 2019 at 3:50

Fatemeh Qasemkhani · Accepted Answer · 2020-12-27 09:16:29Z

4

This works for me:

  const handleChange = (name, e) => {
    const { value } = e.targe;
    if(value) {
      const formattedValue = (Number(value.replace(/\D/g, '')) || '').toLocaleString();
      this.setState({ [name]: formattedValue });
    }
    return null;
  };

edited Dec 27, 2020 at 9:16

answered Mar 3, 2020 at 9:08

Fatemeh Qasemkhani

2,0522 gold badges19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atchutha rama reddy Karri Over a year ago

const { value } = e.target;

Isaac · Accepted Answer · 2019-02-25 03:52:59Z

0

You can try regex as below

handleStateChange = (e) => {
  const { target: { name, value } } = e
  this.setState({ [name]: value.replace(/\B(?=(\d{3})+(?!\d))/g, ",") })
}

answered Feb 25, 2019 at 3:52

Isaac

13k18 gold badges66 silver badges135 bronze badges

Comments

Kyaw Kyaw Soe · Accepted Answer · 2019-02-25 07:43:39Z

There are several way to put comma between integer, the easiest way is using toLocaleString(), and you can use regex to remove comma from string,

here an example.

class App extends React.Component {
  state = {};

  handleStateChange = e => {
    const {
      target: { name, value }
    } = e;
    
    const formatNumber = parseInt(value.replace(/,/g, '')).toLocaleString();
    this.setState({ [name]: formatNumber });
  };

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleStateChange} value={this.state.foo} name="foo" />
      </div>
    );
  }
}



ReactDOM.render(<App />,document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"><div>

Awonuga Oladimeji · Accepted Answer · 2024-01-19 09:41:42Z

0

const handleChange = (e) => { const { value } = e.target;

    if (value !== '') {
      const formattedValue = (Number(value.replace(/\D/g, '')) || '').toLocaleString();
      setTotalCharge(formattedValue);
    } else {
      // Handle the case when the input is empty
      setTotalCharge('');
    }
  };

answered Jan 19, 2024 at 9:41

Awonuga Oladimeji

1

1 Comment

Destroy666 Over a year ago

Hello, please don't post code only and add an explantation as to why you think that this is the optimal solution. People are supposed to learn from your answer, which might not occur if they just copy paste code without knowing why it should be used.

sathish kumar · Accepted Answer · 2019-02-25 03:49:12Z

-1

React Number Format try this npm package.

answered Feb 25, 2019 at 3:49

sathish kumar

1,5171 gold badge12 silver badges19 bronze badges

1 Comment

blaz Over a year ago

If possible, you can provide code sample of how to apply the package to OP's problem to make your answer more helpful.

Collectives™ on Stack Overflow

how to automatically add commas to numbers being typed

5 Answers 5

1 Comment

Comments

here an example.

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

here an example.

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related