title: Calling setState in an eventHandler in the render method
body: <p>When using React I've understood it so that calling setState inside a component's render method is bad practice; instead keep this method pure. However, if I need to update the state based on an event that is linked to a component, how do I do this?</p>
  
  <pre><code>class Toggle extends React.Component {
     constructor(props) {
      super(props);
      this.state = {isToggleOn: true};
  
      // This binding is necessary to make `this` work in the callback
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick() {
      this.setState(prevState =&gt; ({
        isToggleOn: !prevState.isToggleOn
      }));
    }
  
    render() {
      return (
         &lt;button onClick={this.handleClick}&gt;
           {this.state.isToggleOn ? 'ON' : 'OFF'}
         &lt;/button&gt;
      );
    }
  }
  </code></pre>
  
  <p>The code above is from React's official tutorial. As we can see, an eventhandler is bound to the onClick attribute, and inside this eventhandler  the state of the component is changed, so potentially we will update the state while calling from a render method. Thus I am a bit lost as to why this is alright to do but not calling setState explicitly in the render method? Has it to do with how React wraps plain html-events? </p>