Как переделать функциональную компоненту с useEffect под классовую?

Есть компонент, таймер обратного отсчета, написанный через useEffect.Решил личного опыта переделать под классовую компоненту, и тут возникли проблемы. Не совсем понимаю, как правильно нужно перенести. И поставить зависимость. P.S. В пропсе countdownTimestampMs передаю число, которое отвечает за определенную дату в будущем, до которой и ведется отсчет. Может кто-то подскажет, в чем, или где может быть ошибка.

Компонент useEffect :

const CountdownTimer = ({ countdownTimestampMs }) => {
const [remainingTime, setRemainingTime] = useState({
    seconds: '00',
    minutes: '00',
    hours: '00',
    days: '00 ',
});

useEffect(() => {
    const intervalId = setInterval(() => {
        updateRemainingTime(countdownTimestampMs);
    }, 1000);
    return () => {
        clearInterval(intervalId)
    }
}, [countdownTimestampMs])

function updateRemainingTime(countdown) {
    setRemainingTime(getRemainingTimes(countdown))
}

return (
    <div className="CountdownTimer">
        <Timer remainingTime={remainingTime} />
    </div>
); }

Компонент через componentDidUpdate, который не работает.

import React from "react";
import Timer from "./Timer";
import { getRemainingTimes } from "./Utils/CountDownTimerUtils";


 class CountdownTimer extends React.Component {
  constructor() {
    super();

    this.state = ({
        seconds: '00',
        minutes: '00',
        hours: '00',
        days: '00 ',
    })
}



componentDidUpdate(prevProps, prevState) {
    if (prevProps.status != this.props.status) {
        const intervalId = setInterval(() => {
            this.updateRemainingTime(this.props.countdownTimestampMs);
        }, 1000);
    }
}

componentWillUnmount() {
    clearInterval(intervalId)
}


updateRemainingTime(countdown) {
    this.setState(getRemainingTimes(countdown))
}


render() {
    console.log(this.state.seconds)
    return (
        <div className="CountdownTimer">
            <Timer remainingTime={this.state} />
        </div>
    )
     }
   }

export default CountdownTimer;

Ответы (0 шт):