The addZero function is used to format numbers by adding a zero in front of those less than 10, thereby enhancing the visual presentation of digital displays, such as times or dates, to make them more aesthetically pleasing and consistent.

zero.tsx

import { ReactElement } from "react";

export const TimeDisplay = (): ReactElement => {
  const currentHour = new Date().getHours();
  const currentMinute = new Date().getMinutes();

  const formattedHour = addZero(currentHour);
  const formattedMinute = addZero(currentMinute);

  return <p>Current Time: {formattedHour}:{formattedMinute}</p>;
}

const addZero = (i: number) => {
  return i < 10 ? `0${i}` : i;
}