How can I show the number of items in the cart as soon as a user adds an item? Here's the code snippet that checks if there are more than one item in the cart and displays it:
{this.state.inCart.length > 0 ? ( <div className="in-cart-e">{this.state.inCart.length}</div> ) : <div style={{'padding': '14px'}}></div>}However, the document only updates after adding another item or switching to mobile view. Here is the code for adding an item to the cart array:
async firstCart(){
await this.setState({ firstCart: !this.state.firstCart });
if (this.state.firstCart) {
this.state.inCart.push('firstCart');
}else{
if (this.state.inCart.length > 0) {
var index = this.state.inCart.indexOf('firstCart');
this.state.inCart.splice(index, 1);
}
}
}
I'm already using code to display the cart item count, but it seems to be hidden in web view and only visible on mobile devices. Any thoughts on why this might be happening?