renderCart() {
    const cart = {...this.props.cart}; // grab the cart state
    const candle = {...this.props.inventoryObject}; //grab the candle inventory state
    var cartElements = []; //set empty array
      for(let key in cart) { //loop through the cart
        let item = cart[key]; //set item to the value of each key
        //push the items into empty array
        cartElements.push(
          <div className="cart-item" key={key}>
            <img className="cart-image" src={candle[key].image}></img>
            <div className="cart-container">
              <h4 className="cart-name">{candle[key].name}</h4>
              <p>price/candle: ${candle[key].price}</p>
              <p>scent: {candle[key].scent}</p>
            </div>
            <div className="quant-cont">
          <p className="quantity">quantity:</p>
          { this.props.cart[key] === null || isNaN(this.props.cart[key])
          //if the cart is empty set the default value to one, else set it to item.
          ?
            <div>
            <input className="quant-input" type="number" min="0" max="10" defaultValue="1" onChange={(e) => this.handleChange(e, key)} required></input>
            </div>
          :
            <input className="quant-input" type="number" min="0" max="10" defaultValue={item} onChange={(e) => this.handleChange(e, key)} required></input>
          }
          </div>
          <div className="x-button" onClick={() => this.props.removeCandle(key)}>X</div>
          </div>
        )
      }
      //return the elements
      return (
        <div>
        {cartElements}
        </div>
      )
  }