How do I start the count down again after the first auto start?

[Darin1123]

Hi!

I want to use this to build a "send verification code" button. It works great in that it counts down 30 seconds and displays the button. However, I have no idea how to start the count down again by clicking the rendered button.

Here is the code snippet

class CountDownComponent extends React.Component {
    ...
    render() {

        const renderer = ({ hours, minutes, seconds, completed }) => {
            if (completed) {
                // Render a completed state
                return (<span onClick={() => reSendCode()}>
                            click to re-send the code
                        </span>);
            } else {
                // Render a countdown
                return <span className={'disabled'}>re-send in {seconds} second(s)</span>;
            }
        };

        return (
            <CountDown
                date={Date.now() + 30000}
                renderer={renderer}/>
        );
    }
}

Also, how do I implement this reSendCode function properly?

[ndresx]

Hi, you could create a state variable and use it as the countdown's key attribute to re-instantiate the countdown.

class CountDownComponent extends React.Component {
  state = { sendCount: 0 };

  reSendCode() {
    this.setState(({ sendCount }) => ({ sendCount: sendCount + 1 }));
  }

  render() {
    ...
        return (
            <CountDown
                key={this.state.sendCount}
                date={Date.now() + 30000}
                renderer={renderer}/>
        );
  }
}

[Darin1123]

Thanks, Martin. It works!