Format number in jsx React component [duplicate]

Question

I am writing a jsx file and want to format the display of numbers in a table. Here is the code for the table:

<tr>
  <td>
    {stringVar}
  </td>
  <td>
    {numberVar}
  </td>
</tr>

The numberVar is being printed directly; how can I display that number with C-style string formatting (I need to set precision value, add commas, and a $ character)?

Answer 1

You can use any JS expression to format the value. A popular number formatting library is http://numeraljs.com/ but there are many others of course.

As for prefixing it with $, that's just string concatenation:

{"$" + numberVar}

Or, using string interpolation ES6 syntax :

{`$ ${numberVar}`}