My `addToCart` function is not showing any result

Question

This is the code where I have my addtocart function,

import React from 'react'
import './Body.css'
import { useState } from 'react'
// import './Cart.js'
export default function Pricetag(props) {

  const [count, setCartCount] = useState(0)
  return (
    <div>

      <div className="cart">
        <i class="fa-solid fa-cart-shopping"></i>
        <div id="number">=</div>
      </div>

      <div className="card1">

        <div className="image">
          <img src={props.images} alt="" className='card-image' />
        </div>

        <div className="content">

          <div className="name">
            {props.name}
          </div>

        </div>

        <div className="button">
          <button className='btn no1' id='cartbutton' onClick={() => setCartCount( count +1)} >
            {/* <a id="cart" href="https://wa.me/<919650988301>" target='_blank' rel="noreferrer" className='no1'>Add to cart</a></button> */}
            Add to cart </button>
        </div>

      </div>

      <script ></script>

    </div>
  )
}

When I do,

number.innerHTML+=`${items}`

instead of

number.innerHTML=`${items}`

then the numbers are concatenated like strings. Otherwise, nothing is happening, what is wrong here? Can you suggest me some edits in the same code.

Answer 1

As you are using React framework you should use React hooks

Here is an example:

import React, { useState } from 'react'
import './Body.css'
// import './Cart.js'
export default function Pricetag(props) {


  const  [cartCount, setCartCount] = useState(0)


  return (
    <div>

      <div className="cart">
        <i class="fa-solid fa-cart-shopping"></i>
        <div id="number">={cartCount}</div>
      </div>

      <div className="card1">

        <div className="image">
          <img src={props.images} alt="" className='card-image' />
        </div>

        <div className="content">

          <div className="name">
            {props.name}
          </div>

        </div>

        <div className="button">
          <button className='btn no1' id='cartbutton' onClick={() => setCartCount(cartCount +1))} >
            {/* <a id="cart" href="https://wa.me/<919650988301>" target='_blank' rel="noreferrer" className='no1'>Add to cart</a></button> */}
            Add to cart </button>
        </div>

      </div>

    </div>
  )
}

Working on codesandbox