Pomodoro reset button

JavaScript
1

In my current setup I have two components:

  1. App component which is the main component and contains the method resetSetting which resets the state of the component
  2. Timer component gets mounted when a state in App is true. This component has a method called checkSession which sets the state of the Timer component.

My problem is that I (am supposed to) have one reset button within App with the id=“reset”. But it needs to run two different onClick functions based on whether the timer is running or not and the method checkSession is within another component and changes the state of the other component.

So now I’m a little stuck on how to handle the reset button… does anyone have any ideas?

The reset button as it is now:

renderReset () {
      if (this.state.timerOn === false) {
        return (<button id="reset" onClick ={this.resetSetting}>Reset</button>)
      }else{
        return (<button id="reset" onClick ={this.checkSession}>Reset</button>)
      }
   }

Full code is on Codepen: https://codepen.io/MarijkeBroos/pen/BvwPYN?editors=0012

2

You should only attach a single onClick function to the button. Then this onClick function should handle any conditional logic. This means you don’t need the renderReset function.