In React, how to format a number with commas?

  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

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: 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'