title: ReactJS - button onClick gets called during render
body: <p>I have a form with <code>type="range"</code>. Now I would like to add 3 buttons that change the same value that the form does. For some reason, the buttons onClick event seems to get called repeatedly upon calling the render function.</p>
  
  <p>This is my component:</p>
  
  <pre><code>class Slider extends Component {
      constructor(props) {
          super(props);
  
          this.handleChange = this.handleChange.bind(this);
          this.handleButton = this.handleButton.bind(this);
      }
  
      handleChange() {
          this.props.onSetCountdown(parseInt(this.refs.seconds.value, 10));
      }
  
      handleButton(value) {
          this.props.onSetCountdown(parseInt(value, 10));
      }
  
      render() {
          return(
              &lt;div&gt;
                  &lt;form className={styles.ttSlider} ref="form"&gt;
                      &lt;input max="480" min="60" name="slider" onChange={this.handleChange} ref="seconds" type="range" value={this.props.totalSeconds}/&gt;
                      &lt;button onClick={this.handleButton(60)}&gt;1min&lt;/button&gt;
                      &lt;button onClick={this.handleButton(180)}&gt;3min&lt;/button&gt;
                      &lt;button onClick={this.handleButton(300)}&gt;5min&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
          )
      }
  }
  
  Slider.propTypes = {
      totalSeconds: React.PropTypes.number.isRequired,
      onSetCountdown: React.PropTypes.func.isRequired
  };
  </code></pre>
  
  <p>And this is from the parent component:</p>
  
  <pre><code>handleSetCountdown(seconds) {
          this.setState({
              count: seconds
          });
      }
  </code></pre>
  
  <p>From the parent component render:</p>
  
  <pre><code>&lt;Slider totalSeconds={count} onSetCountdown={this.handleSetCountdown}/&gt;
  </code></pre>
  
  <p>This is the error that I get:</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>To me this looks like the buttons onClick gets called while the component is still rendering. What am I doing wrong?</p>