Getting value from htmlcollection

Hello everyone, I am having a simple issue.
I am trying to get the value of an element on my page. innerHtml and value are returning undefined.
when I used this code I finally got

if (this.props.cart.length !== 0) {
let prices = document.getElementsByClassName('cartprice')

It returns this

HTMLCollection(2) [p.cartprice, p.cartprice]

I’ve never worked with an HTMLcollection. How exactly do I extract the value of the elements that I want?
Any help would be appreciated, thank you in advance.

What project are you currently working on?
I think your main problem is that .getElementsByClassName() is returning a collection of results instead of just one. Try

let priceElement = document.getElementsByClassName('cartprice')[0]

to get the first match, and then see if you can use innerHtml or value to get the value of just the first match.
If you’re trying to get all the values, you might want to make a price element list, and then loop through those elements and get the value that way.

Thanks for replying,
This is what the full page looks like. I have multiple elements being mapped from props. I want to be able to grab all of the first of the cartitems array and add them together. I was thinking of just getting the innerhtml and adding it together, but I am certainly open to other solutions too.

        if (this.props.cart.length !== 0) { 
            var cartitems =
              return (
                      <div className="col-sm-12  cartitem" key={cartitems[1]}>
                        <img src={cartitems[2]}  id={cartitems[2]}  alt={cartitems[1]} className="cart-image"></img>
                        <h5 className="" >{cartitems[1]}</h5>
                        <p  className="cartprice">{cartitems[0]}</p>
                        <h3  className="">Duration: 0week(s)</h3> <button >+1</button> <button> -1</button>