React - timer - start button - need to press twice to restart?

JavaScript
#1

Hi, my app timer will not start and stop unless i press start twice? It seems to console log the first start button press as “stop” but i am not 100% sure why?

export class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      minutes: 25,
      seconds: 0,
      toggle: true,
      id: 0
    };

    this.alterInitialTime = this.alterInitialTime.bind(this);
    this.stopTimefn = this.stopTimefn.bind(this);
    this.startTimefn = this.startTimefn.bind(this);
    this.resetTimefn = this.resetTimefn.bind(this);
  }

  componentDidMount() {
    this.myInterval = setInterval(() => {
      const { seconds, minutes } = this.state;
      if (seconds > 0) {
        this.setState(({ seconds }) => ({
          seconds: seconds - 1
        }));
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(this.myInterval);
        } else {
          this.setState(({ minutes }) => ({
            minutes: minutes - 1,
            seconds: 59
          }));
        }
      }
    }, 1000);
  }

  alterInitialTime(i) {
    console.log("THIS", this.props);
    console.log("TARGET", i.target);
    this.setState({
      minutes: i.target.id
    });
  }

  stopTimefn() {
    this.setState({
      toggle: false
    });
  }

  startTimefn() {
    this.resetTimefn();
    this.setState({
      toggle: true
    });
    
  }

  resetTimefn() {
    this.myInterval = setInterval(() => {
      const { seconds, minutes } = this.state;
      if (seconds > 0) {
        this.setState(({ seconds }) => ({
          seconds: seconds - 1
        }));
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(this.myInterval);
        } else {
          this.setState(({ minutes }) => ({
            minutes: minutes - 1,
            seconds: 59
          }));
        }
      }
    }, 1000);
  }

  shouldComponentUpdate() {
    if (this.state.toggle === false) {
      console.log("stop");
      clearInterval(this.myInterval);
    }
    return this.resetTimefn;
  }

  render() {
    return (
      <div>
        <Timer minutes={this.state.minutes} seconds={this.state.seconds} />
        <TimerSetButton
          minutes={25}
          seconds={0}
          alterTime={this.alterInitialTime}
          id={25}
        />
        <TimerSetButton
          minutes={5}
          seconds={0}
          alterTime={this.alterInitialTime}
          id={5}
        />
        <TimerUpdateButton
          startTime={this.startTimefn}
          stopTime={this.stopTimefn}
          resetTime={this.resetTimefn}
        />
      </div>
    );
  }
}

export default App;
#2

i think i understand

step 1 (default)

  1. current state = true

step 2(press stop)

  1. current state = true
  2. next state = false

step 3(press start)

  1. current state = false
  2. next state = true

step 4(press start again)

  1. current state=true
  2. next state = true

only once currentstate and next state are true will the counter begin again.

If thats ok, how can i resolve this so that it will restart on the first click?

#3