How to apply React-number-format to set of numbers in react

This is my code snippet

<Card.Body>
            <Card.Title>{data.country}</Card.Title>
            <Card.Text>Cases: {data.cases}</Card.Text>
            <Card.Text>Active: {data.active}</Card.Text>
            <Card.Text>Critical: {data.critical}</Card.Text>
            <Card.Text>Recovered: {data.recovered}</Card.Text>
            <Card.Text>Deaths: {data.deaths}</Card.Text>
            <Card.Text>Today's cases: {data.todayCases}</Card.Text>
            <Card.Text>Today's death: {data.todayDeaths}</Card.Text>
          </Card.Body>

{data.country},{data.cases}....... all are numbers fetched from an API.I want to format the numbers by placing commas

<NumberFormat
                displayType={"text"}
                thousandSeparator={true}
                thousandsGroupStyle="lakh"
                value={data.cases}
              />

This formats the numbers according to Indian number system. The code looks messed up if I use NumberFormat Tag for all the numbers ..Is there a common way of declaring the react-number-format so that it formats all the numbers???????

Solution

Rather than using formatter to format numbers, I believe you should format data after you fetch it from API, and just display it, which will remove your hassle of using formatter at each and every place where you want to format data.