CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Miha Šušteršič
Miha Šušteršič

Reputation: 10062

ReactJS - button onClick gets called during render

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?

Upvotes: 2

Views: 4526

Answers (2)

MariuszJasinski
MariuszJasinski

Reputation: 504

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>

Upvotes: 2

avilac
avilac

Reputation: 802

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!

Upvotes: 12

Related Questions