title: Abstracting out onClick actions
body: <p>I am attempting to abstract out functionality of a simple app based in ReactJS, however the console is throwing up a few problems that I can't figure out.</p>
  
  <p>It seems to revolve around my use of <code>this.setState(...)</code></p>
  
  <p>I have commented out the original functions in the main Class just for visibility.</p>
  
  <p><strong>Button Class (will be moved to new file)</strong></p>
  
  <pre><code>class Button extends React.Component {
  
    buttonAction(props) {
      switch (this.props.type) {
        case 'add':
          this.setState((prevState) =&gt; ({
            counter: prevState + this.props.label
          }));
          break;
        case 'take':
          this.setState((prevState) =&gt; ({
            counter: prevState - this.props.label
          }));
          break;
        case 'reset':
          this.setState(() =&gt; ({
            counter: 0
          }));
      }
    }
  
    render() {
      return (
  
        &lt;button onClick={this.buttonAction(this.props.type)}&gt;{this.props.label}&lt;/button&gt;
      )
    }
  } 
  </code></pre>
  
  <p><strong>App class</strong></p>
  
  <pre><code>class App extends React.Component {
    // initial state of counter
    state = {
      counter: 0
    };
  
    // // function to increment the counter
    // incrementCounter = (increment) =&gt; {
    //   this.setState((prevState) =&gt; ({
    //     counter: prevState.counter + 1
    //   }));
    // };
  
    render() {
      return (
        &lt;div&gt;
          &lt;Button type={'add'} label={1}/&gt; 
          {this.state.counter}
        &lt;/div&gt;
      )
    }
  }
  
  const root = document.getElementById('root');
  ReactDOM.render(&lt;App /&gt;, root);
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/4qlv5xo2v7" rel="nofollow noreferrer">Please see my code example here</a></p>