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 of a its showing correct result(1,111,111,111) but when i am doing the setState for the same it is show like this (1,1,1,1,1,1,1,1,111).Please suggest where am i going wrong.

required output is- 1,000 10,000 100,000 1,000,000 10,000,000 100,000,000 1,000,0000,000

Answer 1

Please see the linked question for the correct answer on how to print number with thousands separator in currnet locale (the thing you see in debug window). Related to SPFx, you can take locale from the context. It could look like this (assuming the context of a web part):

const culture = this.context.pageContext.cultureInfo.currentCultureName;
const value.toLocaleString(culture)

If you are not interested in supporting multiple languages, then simple value.toLocaleString() should be good enough.