3 Digit Number In DaisyUI / Next.Js Countdown Not Displaying

Question

So I'm a countdown for a Next.js website and am using the daisyUI countdown component but any digit above 99 for the number of days is not rendering properly as seen below:

So initially I have a simple countdown:

 const targetDate = new Date('2024-09-01T07:00:00');

  const [timeLeft, setTimeLeft] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });


 
  useEffect(() => {
    const updateCountdown = () => {
      const currentTime = new Date();
      const difference = targetDate - currentTime;

      if (difference < 0) {
        clearInterval(intervalId);
        setTimeLeft({ days: 0, hours: 0, minutes: 0, seconds: 0 });
 
      } else {
 
        const days = Math.floor(difference / (1000 * 60 * 60 * 24));
        const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((difference % (1000 * 60)) / 1000);
        setTimeLeft({ days, hours, minutes, seconds });
      }
    };

    const intervalId = setInterval(updateCountdown, 1000);
    return () => clearInterval(intervalId);
  }, [targetDate]);

This is how I render the countdown

 <div className="grid grid-flow-col gap-5 text-center auto-cols-max">
          <div className="flex flex-col" style={{ marginBottom: '10px' }}>
            <span className="countdown font-mono text-5xl text-black">
           
              <span style={{ "--value": String(timeLeft.days).padStart(3, '0') }}>{String(timeLeft.days).padStart(3, '0')}</span>
            </span>
            days
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.hours).padStart(2, '0') }}>{String(timeLeft.hours).padStart(2, '0')}</span>
            </span>
            hours
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.minutes).padStart(2, '0') }}>{String(timeLeft.minutes).padStart(2, '0')}</span>
            </span>
            min
          </div>
          <div className="flex flex-col">
            <span className="countdown font-mono text-5xl text-black">
              <span style={{ "--value": String(timeLeft.seconds).padStart(2, '0') }}>{String(timeLeft.seconds).padStart(2, '0')}</span>
            </span>
            sec
          </div>

        </div>

I've added

String(timeLeft.seconds).padStart(3, '0') 

as an attempt to fix this issue but to no avail

Any ideas on how to fix this?

Answer 1

The most likely reason is that your number now having 3 digits is causing it to render somewhere else that you can't see. What's in your countdown class?

You also don't need to use both --value and {..}, best to just stick with the interpolated:

 <div className="flex flex-col">
     <span className="countdown font-mono text-5xl text-black">
         {String(timeLeft.seconds).padStart(2, '0')}
     </span>
    sec
 </div>