ReactJS - button onClick gets called during render

Question

I have a form with type="range". 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.

This is my component:

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(
            <div>
                <form className={styles.ttSlider} ref="form">
                    <input max="480" min="60" name="slider" onChange={this.handleChange} ref="seconds" type="range" value={this.props.totalSeconds}/>
                    <button onClick={this.handleButton(60)}>1min</button>
                    <button onClick={this.handleButton(180)}>3min</button>
                    <button onClick={this.handleButton(300)}>5min</button>
                </form>
            </div>
        )
    }
}

Slider.propTypes = {
    totalSeconds: React.PropTypes.number.isRequired,
    onSetCountdown: React.PropTypes.func.isRequired
};

And this is from the parent component:

handleSetCountdown(seconds) {
        this.setState({
            count: seconds
        });
    }

From the parent component render:

<Slider totalSeconds={count} onSetCountdown={this.handleSetCountdown}/>

This is the error that I get:

Warning: setState(...): Cannot update during an existing state transition (such as within render 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 componentWillMount.

To me this looks like the buttons onClick gets called while the component is still rendering. What am I doing wrong?

Possible duplicate of [React onClick function fires on render](http://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-render) — Swapnil, Jan 02 '17 at 15:15

score 12 · Accepted Answer · edited May 23 '17 at 11:53

It's because instead of passing the function to the event onClick, you're calling the function directly.

Try doing it this way:

<button onClick={() => { this.handleButton(60)}}>1min</button>
<button onClick={() => { this.handleButton(180)}}>3min</button>
<button onClick={() => { this.handleButton(300)}}>5min</button>

Found the answer here: React onClick function fires on render

Hope it helps!

score 2 · Answer 2 · answered Jan 02 '17 at 15:37

2

If you dont want to use anon functions for any reason, the second method is to use bind directly at render function. Then you can delete lines at your constructor :)

<button onClick={this.handleButton.bind(this, 60)}>1min</button>

answered Jan 02 '17 at 15:37

MariuszJasinski

504
3
8

I've been researching this as I had the same issue as the OP and on other similar threads people are recommending binding `this` [in the constructor](https://stackoverflow.com/questions/33846682/react-onclick-function-fires-on-render#comment93079568_33846747) as opposed to binding inside the render method. – AdamJB Jan 04 '19 at 14:00

ReactJS - button onClick gets called during render

2 Answers2