Counter function for adding item in cart and select the item in the list

 Hii Friends ,

In this Blog  I am going to explore how can we make custom counter. the counter is very important in a Application and if you are going to develop a e-commerce application or and application in which you have to show the count of item you must have to use counter to count the item ,

I recently use counter for my application that is similar to Zomato application , in this application user can add the food in the cart so i need to counter to show how much item user has selected,

this is very simple Program suppose you have a list of item which you want to select, from that list you pick some item in some quantity

first you have to select the item which user tapped then you send the item in the parameter of function and implement the function

design your view according to your need use two Touchableopacity for Plus and minus icon and one text to show the count of item,

here is the simple function: -

// function to select the item and perform action according to user action user can select + or - according to their use : -

editOrderItem(action, data,) { let orderList = this.state.CartItem.slice(); let item = orderList.filter(a => a.Menu_Id == data.Menu_Id); if (action == '+') { if (item.length > 0) { let newQty = item[0].Quantity + 1; item[0].Quantity = newQty; item[0].total = item[0].Quantity * data.price; } else { const newItem = { Menu_Id: data.Menu_Id, Quantity: 1, Price: data.Price, total: data.Price, Item_Name: data.Item_Name, }; orderList.push(newItem); } this.setState({CartItem: orderList}); } else { if (item.length > 0) { if (item[0]?.Quantity > 1) { let newQty = item[0].Quantity - 1; item[0].Quantity = newQty; item[0].total = newQty * data.Price; } else if (item[0].Quantity === 1) { orderList = orderList.filter((i) => i.Menu_Id !== data.Menu_Id) } } this.setState({CartItem: orderList}); } }

  //function to show the count of item selected by user : -

 getOrderQty(data) {

 let orderList = this.state.CartItem.filter(a => a.Menu_Id == data.Menu_Id);

 if (orderList.length > 0)

 { return orderList[0].Quantity; }

 else { return 0; } }