Restart the timer on click

[drakshi]

On clicking the "end Session" button, I want the timer to start again from the initial point. The solution you suggested: is to use key, when I am using that a new timer is getting started(Though it resets the timer). How do I solve this?

[vydimitrov]

Hey, I am not sure I understand what you mean by a new timer is getting started? Can you share code so I can help you?

[drakshi]

Sure, here is the code snippet 👍

`class Exercise extends React.Component {
constructor(props) {
super(props);

    this.state = {
        running: false,
        currentTimeMs: 0,
        currentTimeSec: 0,
        currentTimeMin: 0,
        history: [],
        key: 0,
    };
}


setHistoryState = () => {
    if (localStorage.times) {
        this.setState({ history: localStorage.times.split('|') });
    } else {
        this.setState({ history: [] });
    }
};

start = () => {
    if (!this.state.running) {
        this.setState({ running: true });
        this.watch = setInterval(() => this.pace(), 10);
    }
};

stop = () => {
    this.setState({ running: false });
    clearInterval(this.watch);
    if (typeof Storage !== 'undefined') {
        this.saveToLocalStorage();
    } else {
        console.error('local storage not supported');
    }
    this.setHistoryState();
};


reset = () => {
    this.setHistoryState();
    this.setState({
        currentTimeMs: 0,
        currentTimeSec: 0,
        currentTimeMin: 0,
        running: false,
        key: (prevKey) => prevKey + 1

    });
    clearInterval(this.watch);
    if (typeof Storage !== 'undefined') {
        this.saveToLocalStorage();
    } else {
        console.error('local storage not supported');
    }
    this.setHistoryState();

};

resetHistory = () => {
    if (localStorage.times) {
        localStorage.removeItem('times');
    }
    this.setHistoryState();
};
render() {
    return (
        <div>
                                    <CountdownCircleTimer
                                        className="circleTimer"
                                        isPlaying={this.state.running}
                                        duration={21}
                                        colors="#d9d9d9"
                                        trailColor='#652fa1'
                                        strokeWidth="12"
                                        size={140}
                                        key={this.state.key}
                                        onComplete={() => {

                                            return { delay: 0 }
                                        }}
                                    >
                                        {({ remainingTime }) => this.state.running == false ? <PlayArrowOutlinedIcon className='play-icon' onClick={this.start} /> : <PauseOutlinedIcon className='play-icon' onClick={this.stop} />}

                                    </CountdownCircleTimer>

                                    <StopwatchDisplay currentTimeMin={this.state.currentTimeMin} currentTimeSec={this.state.currentTimeSec} formatTime={this.formatTime} />
                                    <EndSessionButton reset={this.reset} {...this.state} formatTime={this.formatTime} />
        </div>
    );
}

}

export default Exercise;
`

[vydimitrov]

When you press end session button, you changed the value for the key and that will make the timer start over from its initial time. Is that what you want?