title: ES6 - Warning: setState(…): Cannot update during an existing state transition
body: <p>I am rewriting some old ReactJS code, and got stuck fixing this error (the error repeats about 1700 times in the console, the DOM does not render at all):</p>
  
  <blockquote>
    <p>Warning: setState(...): Cannot update during an existing state
    transition (such as within <code>render</code> or another component's
    constructor). Render methods should be a pure function of props and
    state; constructor side-effects are an anti-pattern, but can be moved
    to <code>componentWillMount</code>.</p>
  </blockquote>
  
  <p>I am a Component that passes it's state down to a component that should render some controls. Based on the clicked controls, the state should change, and new controls should render.</p>
  
  <p>So this is my Container component:</p>
  
  <pre><code>class TeaTimer extends Component {
      constructor(props) {
          super(props);
          this.state = {
              count: 120,
              countdownStatus: 'started'
          }
      }
  
      componentDidUpdate(prevProps, prevState) {
          if (this.state.countdownStatus !== prevState.countdownStatus) {
              switch (this.state.countdownStatus) {
                  case 'started':
                      this.startTimer();
                      break;
                  case 'stopped':
                      this.setState({count:0});
              }
          }
      }
  
      componentWillUnmount() {
          clearInterval(this.timer);
          delete this.timer;
      }
  
      startTimer() {
          this.timer = setInterval(() =&gt; {
              let newCount = this.state.count -1;
              this.setState({
                  count: newCount &gt;= 0 ? newCount : 0
              });
              if(newCount === 0) {
                  this.setState({countdownStatus: 'stopped'});
              }
          }, 1000)
      }
  
      handleStatusChange(newStatus) {
          this.setState({ countdownStatus: newStatus });
      }
  
      render() {
          let {count, countdownStatus} = this.state;
          let renderStartStop = () =&gt; {
              if (countdownStatus !== 'stopped') {
                  return &lt;StartStop countdownStatus={countdownStatus} onStatusChange={this.handleStatusChange()}/&gt;
              } else {
                  return &lt;div&gt;This will be the slider form&lt;/div&gt;
              }
          };
          return(
              &lt;div className={styles.container}&gt;
                  &lt;p&gt;This is the TeaTimer component&lt;/p&gt;
                  &lt;Clock totalSeconds={count}/&gt;
                  {renderStartStop()}
              &lt;/div&gt;
          )
      }
  }
  </code></pre>
  
  <p>And this is my controls component:</p>
  
  <pre><code>class StartStop extends Component {
      constructor(props) {
          super(props);
      }
  
      onStatusChange(newStatus) {
          return() =&gt; {
              this.props.onStatusChange(newStatus);
          }
      }
  
      render() {
          let {countdownStatus} = this.props;
  
          let renderStartStopButton = () =&gt; {
              if(countdownStatus === 'started') {
                  return &lt;button onClick={()=&gt; this.onStatusChange('stopped')}&gt;Reset&lt;/button&gt;;
              } else {
                  return &lt;button onClick={()=&gt; this.onStatusChange('started')}&gt;Start&lt;/button&gt;
              }
          };
  
          return(
              &lt;div className={styles.tt.Controls}&gt;
                  {renderStartStopButton()}
              &lt;/div&gt;
          )
      }
  }
  
  StartStop.propTypes = {
      countdownStatus: React.PropTypes.string.isRequired,
      onStatusChange: React.PropTypes.func.isRequired
  };
  </code></pre>
  
  <p>I am sorry about the wall of text, but I really can;t figure out where the error is coming from - and therefor don't know which part of the code I can leave out.</p>
  
  <p>I have tried implementing the solution found in a <a href="https://stackoverflow.com/questions/37387351/reactjs-warning-setstate-cannot-update-during-an-existing-state-transiti">seemingly related question</a>, but can't get it to work either.</p>