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
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>
);
};
JavaScript numbers can be formatted in different ways like commas, currency, etc. You can use the toFixed() method to format the number with decimal points, and the toLocaleString() method to format the number with commas and Intl. NumberFormat() method to format the number with currency.
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: https://stackoverflow.com/a/32154217/6200607
var number = 1234567890; // Example number to be converted
⚠ Mind that javascript has a maximum integer value of 9007199254740991
Other Solution:
https://css-tricks.com/snippets/javascript/comma-values-in-numbers/
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With