how can we automatically add commas to numbers being typed in SPFx react fluent textfield. ex: 1,000,000,000

Question

<div>
   <TextField
      value={this.state.Budget}
      onChanged={this.onChangeBudget}
   />
</div> 

public onChangeBudget = (value: string) => {
   console.log("Budget : " + value);
   console.log(value.replace(/\B(?=(\d{3})+(?!\d))/g, ','));
   let abc = value.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
   return this.setState({ Budget: abc });
}

So the issue is when I am logging the value its showing correct result(1,111,111,111). But when I am doing the setState for the same, it is shows the result like this (1,1,1,1,1,1,1,1,111).

Please suggest where am I going wrong?

Answer 1

My test code for your reference:

public onChangeBudget = (value: string) => {
    
    let newValue=value.replace(/,/g, "");
   
    let abc = newValue.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
    return this.setState({ Budget: abc });
 }

Test result: