Warning: setState(...) ..., endless loop

Question

This error occurs when you go to the page

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.

in form.js

render() {
    return (
    ...
    <Row className={css(stylesClient.adm_search)}>
        <Col span={3} style={{fontSize: '24px'}}>Приёмы</Col>
        <Col span={3} offset={7}>Период: с</Col>
        <Col span={4}>
            <Datetime
                className="date_time"
                dateFormat="DD.MM.YYYY"
                timeFormat={false}
                locale="ru"
                onChange={(e)=>this.setState({dateStart: e.target.value})}/>
        </Col>
        <Col span={1}>по</Col>
        <Col span={4}>
            <Datetime
                className="date_time"
                dateFormat="DD.MM.YYYY"
                timeFormat={false}
                locale="ru"
                onChange={(e)=>this.setState({dateEnd: e.target.value})}/>
        </Col>
        <Col span={2}>
            <Button
                className={css(stylesClient.set_button)}
                onClick={this.props.receptions_filter(this.state.dateStart, this.state.dateEnd)}>
                <img style={{marginLeft: '-10px'}} src={arrowWhite}/>
            </Button>
        </Col>
    </Row>
    ...
    )
}

I need to filter table by two dates, but go out an endless loop, I recently began to understand Web technologies.

sorry for my bad english

Answer 1

onClick is being triggered on every render.

Change it to:

onClick={() => this.props.receptions_filter(...)}