adding item to cart in reactjs using localStorage - reactjs

Question

whenever i am adding item in cart it get added in cart on page but not on localstorage on first click but my total price updates according to the item selected price. And when i add next item it gets added on localstorage as well as the first selected item gets added.
Everything is working properly but problem is on first click item is not displaying on localstorage.Please help , i am stuck with this problem since more then 2days,Thank you in advance!
componentDidMount() {
var localItems = JSON.parse(localStorage.getItem('items')) || [];
this.setState({
selectedProduct : localItems
});}
addToCart(image, name, type,price, id) {
const found = this.state.selectedProduct.some(el => el.id === id );
const obj = {image,name,type,price,id};
this.setState(
{
selectedProduct: found ? this.state.selectedProduct : [...this.state.selectedProduct,obj],
isAdded: true,
totalPrice : found ? this.state.totalPrice : this.state.totalPrice + parseInt(price, 10)
},
() => {
localStorage.setItem('total',this.state.totalPrice);
localStorage.setItem("items", JSON.stringify(this.state.selectedProduct));
}
)
}
Please see these images of my output for more clearification of statement
When first item is selected (on first click):
When i click on Second Item:

Answer 1

You can't use this.state.totalPrice inside the second parameter of setState, it will still be the old variable.
Instead do it all inside a callback method in setState, that way you'll get correct access to the previous state:
addToCart(image, name, type, price, id) {
const obj = {
image,
name,
type,
price,
id
};
this.setState((prevState) => {
const found = prevState.selectedProduct.some(el => el.id === id);
const selectedProduct = found ? prevState.selectedProduct : [...this.state.selectedProduct, obj];
const totalPrice = found ? prevState.totalPrice : prevState.totalPrice + parseInt(price, 10)
localStorage.setItem('total', totalPrice);
localStorage.setItem("items", JSON.stringify(selectedProduct));
return {
selectedProduct,
totalPrice,
isAdded: true
};
})
}