How to prevent auto deleting 0 after .?

I want to display $125.00, but insted I get $125, how to prevent it

import { Typography } from "@mui/material";

function ProductPrize({}) {
  const presentPrize = 125.0;
  return (
    <Typography variant="h4" sx={{ fontWeight: "bold" }}>
      {`$${presentPrize}`}
    </Typography>
  );
}

export default ProductPrize;

I tried parsefloat etc.

>Solution :

JavaScript prints out the minimum number of decimal points it needs to. If you always want 2 decimal points, you can change the code to the following:

<Typography variant="h4" sx={{ fontWeight: "bold" }}>
  {`$${(Math.round(presentPrize * 100) / 100).toFixed(2)}`}
</Typography>

This with round 1.236 to $1.24

Leave a Reply