Formatting numbers and dates is a common requirement for lots of apps but how do we do this in react apps?

Let’s say we have a component in our app that shows a list of customers, looking like this:

… and here’s the current code for this component:`// CustomerSearchResults.tsx

// CustomerSearchResults.tsx

import * as React from "react";
import Customer from "./Customer";

interface CustomerSearchResultsProps {
  customers: Customer[];
}

const CustomerSearchResults = (props: CustomerSearchResultsProps) => {
  const rows = props.customers.map(customer => (
    <tr key={customer.id}>
      <th>{customer.id}</th>
      <td>{customer.name}</td>
      <td>{customer.revenue}</td>
      <td>{customer.firstSale.toString()}</td>
    </tr>
  ));

  return (
    <table className="table table-hover">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Revenue</th>
          <th>First Sale</th>
        </tr>
      </thead>
      <tbody>{rows}</tbody>
    </table>
  );
};

export default CustomerSearchResults;

… with the following data:`// customers.json

// customers.json

[
  {
    id: 1,
    name: "Alfreds Futterkiste",
    revenue: 12000,
    firstSale: "2012-04-23T00:00:00.000Z"
  },
  {
    id: 2,
    name: "Chop-suey Chinese",
    revenue: 34000,
    firstSale: "2000-10-21T00:00:00.000Z"
  },
  {
    id: 3,
    name: "Ernst Handel",
    revenue: 82400,
    firstSale: "2000-01-03T00:00:00.000Z"
  },
  {
    id: 4,
    name: "Maison Dewey",
    revenue: 10000,
    firstSale: "2012-06-02T00:00:00.000Z"
  },
  {
    id: 5,
    name: "Rancho grande",
    revenue: 40000,
    firstSale: "1976-01-04T00:00:00.000Z"
  }
];

You can see that we need to clean up the revenue and first sale data by formatting them.

Formatting numbers

We can use Intl.NumberFormat to format the revenue:

<td>
  {new Intl.NumberFormat("en-GB", {
    style: "currency",
    currency: "GBP"
  }).format(customer.revenue)}
</td>

In the above example we are formatting to revenue using Great British locale, using the Great British currency style.

#react