React JSX formatting values like template filters in Django

Question

I am fluent in Django but new to React. I am building a simple React app that displays numeric values. I want the values to all be displayed in a standardized way, e.g. currency decimals formatted as $#,##0.00.

I found this question on Stack Overflow and applied it as follows:

export function MyAppTable() {
  const [data, setData] = useState({});

  // TODO: add a side effect function to pull dynamic data
  const data = {
    result: {
      red: 100.00,
      green: 99.90,
      blue: 95.99,
    }
  };

  return (
    <>
      {data === undefined ?
        <Spinner animation="border" />
      :
        // report results
        <table class="table" id="results_table">
          <tr>
            <th scope="row">Red</th>
            <td id="red_value">
              ${data['result']['red'].toLocaleString(undefined, {maximumFractionDigits:2})}
            </td>
          </tr>
          <tr>
            <th scope="row">Green</th>
            <td id="green_value">
              ${data['result']['green'].toLocaleString(undefined, {maximumFractionDigits:2})}
            </td>
          </tr>
          <tr>
            <th scope="row">Blue</th>
            <td id="blue_value">
              ${data['result']['blue'].toLocaleString(undefined, {maximumFractionDigits:2})}
            </td>
          </tr>
        </table>
      }
    </>
  );
}

But that produces inconsistent results across the three values:

Red        $100
Green      $99.9
Blue       $95.99

I want any numeric value to be displayed according to a format rule such as $#,##0.00, where # is a digit placeholder that represents optional digits and does not display extra zeros, commas are inserted as necessary, and 0 is a digit placeholder that displays insignificant zeros (similar to Excel formatting).

I can do this easily in a Django template with filters, such as:

${{ some_value|floatformat:2|intcomma }}

As a side note, my formatting needs include other numeric and non-numeric situations, such as large integer wordification, string capitalization/pluralization, etc. as you would expect when presenting dynamic information in HTML.

First, is there a simple fix to my above code to at least get currency decimal representation working as I intended? Second, is there something like Django filters (or helper functions) for React or javascript that addresses both my example and the other formatting situations I listed above? Or do I need to roll my own functions for all of this?

Answer 1

I think you are looking for minimumFractionDigits.

Number(42.00).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits: 2})

I also recommend looking at the documentation of the internationalisation api, because it also has special parameters for currency formatting: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#parameters

Number(42.00).toLocaleString(undefined, { style: 'currency', currency: 'USD' })