In React, how to format a number with commas?

My API is sending React integers like 10, 31312, 4000.

In my React component, what's the right way to format these numbers like so:

from: 10, 31312, 4000 to: 10, 31,312, 4,000 

Update

The number is being provided by my Rails API and rendered in a React component:

const RankingsList = ({rankings, currentUserId}) => { return ( <div className="listGroup"> {rankings.map((ranking, index) => <span className="number">{ranking.points}</span> )} </div> ); }; 

5 Answers

Print a number with commas as thousands separators in JavaScript

You can find a general JS solution for this:

toLocaleString:

// A more complex example: number.toLocaleString(); // "1,234,567,890" // A more complex example: var number2 = 1234.56789; // floating point example number2.toLocaleString(undefined, {maximumFractionDigits:2}) // "1,234.57" 

NumberFormat (Safari not supported):

var nf = new Intl.NumberFormat(); nf.format(number); // "1,234,567,890" 

source:

var number = 1234567890; // Example number to be converted

⚠ Mind that javascript has a maximum integer value of 9007199254740991

Other Solution:

2345643.00 will return 2,345,643.00

I have a class which converts a number to either 31,312 or 31,312.00.

The code is pretty much;

return value.toLocaleString(navigator.language, { minimumFractionDigits: 2 });

and

return value.toLocaleString(navigator.language, { minimumFractionDigits: 0 });

So you can just use toLocaleString for converting.

Update

Based on your example, it would be (assuming points is a number);

const RankingsList = ({rankings, currentUserId}) => { return ( <div className="listGroup"> {rankings.map((ranking, index) => <span className="number">{ranking.points.toLocaleString(navigator.language, { minimumFractionDigits: 0 })}</span> )} </div> ); }; 

However, you might want to just move this into a smaller component called NumberDisplay and a property to show/hide decimal points'

 export const formatNumber = inputNumber => { let formetedNumber=(Number(inputNumber)).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'); let splitArray=formetedNumber.split('.'); if(splitArray.length>1){ formetedNumber=splitArray[0]; } return(formetedNumber); }; 

Please note that I am ignoring the decimal points

React component to format numbers in an input or as text: react-number-format

React boys, use this component.

// number cell function NumberCell({ line, handleBlur, property, readOnly }) { function replaceNonNumeric(numStr) { return String(numStr).replace(/[^0-9]/g, '') } function commarize(numStr) { return Number(replaceNonNumeric(numStr)).toLocaleString() } useEffect(() => { setValue(commarize(line[property.name])) }, [line]) const [value, setValue] = useState(line[property.name]) const handleChange = e => { setValue(commarize(e.target.value)) } function proxyHandleBlur(e) { e.target.value = replaceNonNumeric(e.target.value) return handleBlur(e) } return ( <input name={property.name} value={ value } onChange={handleChange} onBlur={proxyHandleBlur} type="text" readOnly={readOnly} /> ); }