I have some serious questions here.
First, calculateTotal seems to only take into account the items in the cart, not the quantitites.
In general, your cart component is very confusing - really that is 2-3 components stuck in the same file.
Next:
export function CreateComponentCard({ product, itemToDelete, itemQuantity }) {
const [quantity, setQuantity] = useState(1);
Why is this component having its own quantity state? The calling component has quantities and needs to know and control them. I would be passing in the quantity and a callback to change them in the parent component.
Next, your cart is mapped thusly:
{filteredCart.map(createBillingDetails)}
filteredCart is a state variable.
You are passing them into this as billingDetails → billingItem:
function createBillingDetails(billingDetails) {
return (
<CreateBillingComponent billingItem={billingDetails} itemQuantity={itemQuantityState} key={billingDetails.id} />
)
}
You are then mutating that object:
export function CreateBillingComponent({ billingItem, itemQuantity }) {
if (itemQuantity.id === billingItem.id && itemQuantity.operation === "increase") {
billingItem.quantity = (itemQuantity.quantity) + 1;
How is React going to know that that data has changed? You can’t mutate state. Repeat it 1000 times, you can’t mutate state. Every time you mutate state, Dan Abramov strangles a puppy. You have to replace the state with a new object so React can tell that it has changed. Since this is a state variable, you need to do that with the setFilteredCart function or there is no guarantee that React will understand.
I would want to fix those things before moving on.