Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

187
Views
How can I reset the timer in a timer based on the react-countdown component?

I am new to reactjs and javascript. I am trying to implement a timer in my webpage. How do I implement the reset() function which is called when the "Reset Clock" button is clicked? I am expecting the timer to be reset to the initial value. Please provide suggestions for implementing the reset function.

This is the code that I am using:

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
import Clock from './CountDown';

class App extends React.Component {
    clockRef = null;

    constructor(props) {
        super(props);
        this.setClockRef = this.setClockRef.bind(this);
        this.start = this.start.bind(this);
        this.pause = this.pause.bind(this);
        this.reset = this.reset.bind(this);
    }

    start() {
        this.clockRef.start();
    }
    pause() {
        this.clockRef.pause();
    }
    reset() {
    }

    setClockRef(ref) {
        // When the `Clock` (and subsequently `Countdown` mounts
        // this will give us access to the API
        this.clockRef = ref;
    }

    render() {
        return (
            <>
                <button onClick={this.start}>Start Clock</button>
                <button onClick={this.pause}>Pause Clock</button>
                <button onClick={this.reset}>Reset Clock</button>
                <Clock refCallback={this.setClockRef} time="60" />
            </>
        );
    }
}
export default App;

CountDown.js:

import React from 'react';
import Countdown from 'react-countdown';

export default class Clock extends React.Component {
    render() {
        const { refCallback, time } = this.props;

        return (
            <Countdown
                // When the component mounts, this will
                // call `refCallback` in the parent component,
                // passing a reference to this `Countdown` component
                key = {0}
                ref={refCallback}
                date={Date.now() + (time * 60000)}
                intervalDelay={3}
                zeroPadTime={2}
                autoStart={false}
                daysInHours
            />
        );
    }
}
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Checkout this example from the react-countdown repo that implements start, pause and reset: https://github.com/ndresx/react-countdown/blob/c909d9746bc79cdc9b8866d98284b0256d643a1a/examples/src/CountdownApi.tsx

In that example they reset the countdown by holding the date in state and updating it to do a reset.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!