title: Function keeps on rendering when I try to add to a value to the sum. create-react-app
body: <p>I am trying to create a function in which when a user clicks the add button <code>className = "addButton"</code> ; they will add the price value which is obtained from the .json that was fetched in the parent class <code>this.props.products</code>. </p>
  
  <p>My problem is > When I try to render the ProductSquare component which contains the add button and a few other things related to the product, it will render in a infinite loop. </p>
  
  <p>I am also selectivly targeting products that have the unique <code>product._id</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from "react";
  
  //css classes
  import "./cssForComponents/ProductSquare.css";
  import AddButton from "./addButton.js";
  
  class ProductSquare extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoaded: true,
        sum: 0
      };
  
      this.onClickHandlerForAdd = this.onClickHandlerForAdd.bind(this);
      this.getData = this.getData.bind(this);
    }
  
    onClickHandlerForAdd(price) {
      this.setState({ sum: price });
    }
  
    getData() {
      return this.props.products.map(
        (product) =&gt;
          product._id === "5b77587c570ee12e768704da" ? ( 
            &lt;div className="ProductSquare" key={product.index}&gt;
              &lt;button
                className="AddButton"
                onClick={this.onClickHandlerForAdd(product.price)}
              &gt;
                {product.price}
              &lt;/button&gt;
  
              &lt;button className="InfoButton"&gt;{product.about}&lt;/button&gt;
            &lt;/div&gt;
          ) : (
            console.log("Results were not loaded")
          )
      );
    }
  
    render() {
      console.log(this.state.sum);
  
      return this.getData();
    }
  }
  
  export default ProductSquare;</code></pre>
  </div>
  </div>
  </p>