Countdown from date with days, hours, minutes, secondes with useEffect

Question

I did a countdown from a defined date, I'm close to make it works, but I don't get the problem

I just started ReactJS, so apparently my type is not right I need to have a countdown with days, hours, minutes and seconde, I took useEffect to make it I dont know if its the best for that

TypeError: Assignment to constant variable. getTime2

42 | hours = hours-(days*24);

import React, { useState, useEffect } from 'react';

const Countdown = () => {
  const[rDay, setRDay] = useState(0);
  const[rHour, setRHour] = useState(0);
  const[rMin, setRMin] = useState(0);
  const[rSec, setRSec] = useState(0);

function getTime2() {
   const date_future = new Date(
    Date.UTC(2021, 11, 22, 18, 0, 0),
  ).getTime(); 
   const date_now = new Date();

   const seconds = Math.floor((date_future - (date_now))/1000);
   const minutes = Math.floor(seconds/60);
   const hours = Math.floor(minutes/60);
   const days = Math.floor(hours/24);
    
   hours = hours-(days*24);
   minutes = minutes-(days*24*60)-(hours*60);
   seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
   
   setRDay(days);
   setRHour(hours);
   setRMin(minutes);
   setRSec(seconds);
}

   useEffect(()=>{
    setInterval(function(){
      getTime2()
    }, 1000);
  }, []);


  return(
    <div className="timer-container">
      <div className="numbers">
      <span className = "num-span">{("0" + rDay).slice(-2)}</span>
        <span className = "segment">:</span>
        <span className = "num-span">{("0" + rHour).slice(-2)}</span>
        <span className = "segment">:</span>
        <span className = "num-span">{("0" + rMin).slice(-2)}</span>
        <span className = "segment">:</span>
        <span className = "num-span">{("0" + rSec).slice(-2)}</span>
      </div>
      <div class="sub-numbers">
      <span className = "sub-span">Day(s)</span>
        <span></span>
        <span className = "sub-span">H</span>
        <span></span>
        <span className = "sub-span">Min</span>
        <span></span>
        <span className = "sub-span">Sec</span>
      </div>
     
    </div>
    
  );
};


export default Countdown;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

You are reassigning variables that you have declared as constant using const. Change const to let and the TypeError should go away:

   let seconds = Math.floor((date_future - (date_now))/1000);
   let minutes = Math.floor(seconds/60);
   let hours = Math.floor(minutes/60);
   let days = Math.floor(hours/24);
    
   hours = hours-(days*24);
   minutes = minutes-(days*24*60)-(hours*60);
   seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);