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:
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;
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
/>
);
}
}
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.