How to store inCart value in localStorage? - reactjs

Question

In my React ECommerce project, I have created Add to cart icon, when clicked disables, the icon is replaced with 'In Cart' text showing that the product is available in cart,but, the problem is when the browser is refreshed the 'In Cart' text disappears and cart icon is back. How to store it in localStorage so that the value remains even when refreshed. Following is the code for reference.
ProductList.js
<ProductConsumer>
{value => {
return value.products.map((product, key) => {
return <Product key={product.id} product={product} />;
});
}}
</ProductConsumer>
Product.js
export default function Product(props) {
// Taken from ProductList.js File
const {id, title, img, price, inCart} = props.product;
<ProductConsumer>
{(value) => (
<button className="cart-btn" disabled={inCart?true:false}
onClick={() => {value.addToCart(id)}}>
{ inCart ? (
<p className="text-capitalize mb-0" disabled>
{" "}
In Cart</p>
) : (
<i className="fas fa-shopping-cart"/>
)}
</button>
)}
</ProductConsumer>
}
context.js (addToCart(id) is defined)
const ProductContext = React.createContext();
class ProductProvider extends Component {
addToCart = (id) => {
let tempProducts = [...this.state.products];
const index = tempProducts.indexOf(this.getItem(id));
const product = tempProducts[index];
// How to store this value 'product.inCart' in...
// ...localStorage and make it true until the product is
// removed
product.inCart = true;
product.count = 1;
const price = product.price;
product.total = price;
this.setState(() => {
return {
products: tempProducts,
cart: [...this.state.cart, product]
};
},
() => {
this.addTotal();
localStorage.setItem('myCart', JSON.stringify(this.state.cart));
});
}
}
const ProductConsumer = ProductContext.Consumer;
export { ProductProvider, ProductConsumer };
As seen above when the product is in cart, cart icon gets disabled, I want to make inCart be true (even when the browser is refreshed) until and unless the product is removed from cart. Watch out for sandbox link: https://codesandbox.io/s/mobile-store-tdgwm
Above File ProductList.js is added and ProductConsumer is defined from context.js

Answer 1

In your setProducts function in context.js
setProducts = () => {
let tempProducts = [];
let activeProducts = JSON.parse(localStorage.getItem("myCart"));
storeProducts.forEach(item => {
let singleItem = { ...item };
if(activeProducts){
activeProducts.forEach(i => {
if (singleItem.id === i.id) {
singleItem = i;
}
});
}
tempProducts = [...tempProducts, singleItem];
});
this.setState(() => {
return { products: tempProducts };
});
};
Working codeSandbox - https://codesandbox.io/s/mobile-store-325x9