Handling methods in order in React

Question

Hi im trying to code a Timer. My problem is that the countdown should start after clicking a button and when that status is changed from start to stop and vise versa. I cant figure out how to handle it and which level to put it.

ADDITIONAL INFO: When clicking the button, it goes to the method handler. Changes the status with setstate() but it renders at the end. Which is to late for the countdown to start.

Here is the Game Component:

import React, { Component } from 'react';
import './Game.css';
import Timer from './Timer'


class Game extends Component {
    constructor() {
        super();
    }

    state = {        
        buttonStatus: {status:"Start" , classButton:"Button ButtonBackgroundColorGrey" },
        dotclass : "",
        timer: 60     
    }

    componentDidMount() {
        this.timersignal();
      
     }
    

    buttonclick = () =>{        
        (this.state.buttonStatus.status === "Start") 
        ? this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"}) 
        : this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})      
         
        this.componentDidMount();
    }    

    timersignal = () => {
        if(this.state.buttonStatus.status === "Stop") {
            this.Interval = setInterval(() =>{
                this.setState(() => ({
                    timer : this.state.timer - 1
                }))
            },1000)
    
            console.log("didMount start")
           }
           else(
               console.log("didMount stop")
           )
    }

    
 
    render() {
        return (
            <div>
                <div className="Body-Container">                                       
                    <h2 className="States"> Time </h2>
                    <Timer buttonstate= {this.state.timer}/>
                    <button className={this.state.buttonStatus.classButton} onClick={this.buttonclick}>{this.state.buttonStatus.status}</button>
                </div>
            </div>

        );
    }

}




export default Game;

Here is the Timer Component:

import React, { Component } from 'react';
import "./Timer.css";

class Timer extends Component {
       
    render() { 
        return ( 
            <h3 className="Timer">{this.props.buttonstate}</h3>
         );
    }
    
}
 
export default Timer ;

Answer 1

The Final Answer:

timerToggle = () =>{       
        
        if(this.state.buttonStatus.status === "Start") {
            this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})
            this.Interval = setInterval(() =>{
            
                this.setState(() => ({
                    timer : this.state.timer - 1
                }))
            },1000)
            
        }
        else{
            this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})  ;
            
            clearInterval(this.Interval);
        }         
        
    }

Answer 2

You just need one method and call it in componentDidMount and on click.

    timerToggle = () =>{
        if((this.state.buttonStatus.status === "Start") {
            this.setState({buttonStatus:{status:"Stop",classButton:"Button ButtonBackgroundColorRed"},dotclass:"Dot"})
    
            clearInterval(this.Interval);
        }else{
            this.setState({buttonStatus:{status:"Start",classButton:"Button ButtonBackgroundColorGrey"},dotclass:""})  ;
            this.Interval = setInterval(() =>{
                this.setState(() => ({
                    timer : this.state.timer - 1
                }))
            },1000)
        }
    
    }    

 componentDidMount() {
        this.timerToggle();
      
     }