I need to have the total summary box div appear when the quantity of any item is more than 0 containing the div for the product which has a quantity. If the quantity hits 0 then the box/div of the item should disappear.

I have an class app with 3 variables of item quantity for 3 different products.

This is the summary box and its tied to the values of the items

HD is the Quantity of HD drones

QHD ............. QHD drones

Bat is the Quantity of batteries

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      isLoaded: false,
      HD: 0,
      QHD: 0,
      Bat: 0,
    };

    this.changeHD = this.changeHD.bind(this);
    this.changeQHD = this.changeQHD.bind(this);
    this.changeBat = this.changeBat.bind(this);
  }

The quantity rocker buttons on the side of the input call increaseHD, decreaseHD The amount can be edited in the input box to any non-negative number and that uses setstate to change the HD, QHD, Bat vars.

Here is the code of ChangeHD which is called Onchange of the input for any of the products

changeHD = (e) => {
    let o = 0;
    o = parseInt(e.target.value);
    console.log(o);
    if (o < 0) {
    } else {
      this.setState({ HD: o });
    }
  };

The code for the increase/decrease Called by Onclick

increaseHD = () => {
    this.setState({
      HD: this.state.HD + 1,
    });
  };
  decreaseHD = () => {
    let i = 0;
    i = this.state.HD;
    if (i == 0) {
    } else {
      this.setState({
        HD: this.state.HD - 1,
      });
    }
  };

For example If the 1080p var HD increases from 0 to 1 The Summary box will appear

Render code for summary box (Placeholder stuff)

<div className="sumbox">
              <div>Total Summary box</div>
              <div>HD camera, QTY = 1 Total = 833.99</div>
              <div>QHD camera, QTY = 1 Total = 895.31</div>
              <div>Batteries, QTY = 1 Total = 78.5</div>
            </div>