Need to dynamically calculate refresh interval depending on time format passed in as prop

Question

I have a react component that accepts an array of 2 moment.js time formats that will be used as props in the component to then render the time in a small clock widget in the format passed in. I need to dynamically calculate the refresh interval depending on time format passed in and being utilized. So if only needing seconds due to time format passed in being a second counter, interval refreshes every second, if only needing minutes, refresh rate will be around every minute. Couldn't find anything that has helped yet so asking for some advice. Thanks in advance. Here is my code, sorry it looks so rough right now.

import React, { Component } from 'react';
import moment from 'moment';

// Styles
import Style from 'Components/Header/Header.module.css';

class ClockWidget extends Component {
    constructor() {
        super()

        this.state = { 
            time: moment().format('hh:mm a'),
            toggle: true,
            timerID: null
        }

        this.handleClick = this.handleClick.bind(this);
    }


    setTime() {

        this.timerID = setInterval(() => {

            if (this.state.toggle == true) {

                this.setState({
                    time: moment().format(this.props.timeFormat[0])
                })

            } else if (this.state.toggle == false) {

                this.setState({

                    time: moment().format(this.props.timeFormat[1])
                })
            }
            console.log("State: ", this.state);
        }, this.state.toggle ? 1000 : 60000);
    }


    componentDidMount() {

        this.setTime();
    }

    handleClick() {

        if (this.state.toggle) {
            this.setState({ toggle: false })
        } else {
            this.setState({ toggle: true })
        }
    }

    render() {  

        return ( 
            <div onClick={this.handleClick}>
                <p className={Style.action}> {this.state.time} </p>            
            </div>
        )}
    }
    ClockWidget.defaultProps = {
        timeFormat: ['hh:mm a', 'HH:mm']
    }

export default ClockWidget;

Answer 1

do some changes...

in your state {
    this.timerId = null
}

.
.
.
.

setTime(time = null, toggle = null) {

    this.timerId = setInterval(() => {
        if (this.state.toggle) {
            this.setState({
                time: moment().format(this.props.timeFormat[0]),
            })
        } else if (!this.state.toggle) {
            this.setState({
                time: moment().format(this.props.timeFormat[1]),
            })
        }
    }, 1000)
}

componentDidMount() {
    this.setTime();
}

componentWillUnmount() {
    clearInterval(this.timerId)
}

and if you are gonna update then use update lifecycle methods togather with mount lifecycle methods