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 ponent:

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 ponent:

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

From the parent ponent 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 ponent'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 ponentWillMount.

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

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 ponent:

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 ponent:

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

From the parent ponent 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 ponent'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 ponentWillMount.

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

• javascript
• reactjs
• ecmascript-6

• Possible duplicate of React onClick function fires on render – Swapnil Commented Jan 2, 2017 at 15:15

2 Answers 2

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!

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>