title: Correct way to setup a class variable for total QTY of product to be altered by buttons (React JS)
body: <p>I am building a product detail page and created a class app to contain the main code of the project to facilitate a constructor for loading data from my API.</p>
  <p>I want to have 3 numeric variables which I can increase/decrease via buttons on page
  It set for 3 products of QHD, HD, Batteries.</p>
  <p>I wrote the following code but its not correct and I am searching for correct ways to implement this.</p>
  <pre><code>class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        items: [],
        isLoaded: false,
        HD: 0,
      };
    }
  
    componentDidMount() {
      fetch(&quot;https://fe-assignment.vaimo.net/&quot;)
        .then((res) =&gt; res.json())
        .then((data) =&gt; {
          console.log(data);
          this.setState({
            isLoaded: true,
            items: data,
            TI: 0,
          });
        });
    }
  
    increaseHD() {
      HD = 1;
    }
  </code></pre>
  <p>Continued</p>
  <pre><code>render() {
      const HD = 0;
  </code></pre>
  <pre><code>&lt;div className=&quot;button-row&quot;&gt;
                      &lt;button className=&quot;minus&quot;&gt;-&lt;/button&gt;
                      &lt;form className=&quot;input&quot;&gt;{HD}&lt;/form&gt;
                      &lt;button className=&quot;plus&quot; onClick={this.increaseHD}&gt;+&lt;/button&gt;
                    &lt;/div&gt;
      
  </code></pre>
  <p>Returns the error that this undefined.
  I know it should be setup up perhaps in the constructor or class wide as  but I am new to reactjs and need some help</p>