Skip to content

Instantly share code, notes, and snippets.

@Harshmakadia
Last active February 24, 2019 10:55
Show Gist options
  • Save Harshmakadia/28e12d527c6563e3c2f6572ff61e657d to your computer and use it in GitHub Desktop.
Save Harshmakadia/28e12d527c6563e3c2f6572ff61e657d to your computer and use it in GitHub Desktop.
Consume Context
import React, { Component } from 'react';
import ShopContext from '../context/shop-context';
import Navigation from '../components/navigation';
import './product.css';
class ProductsPage extends Component {
render() {
return (
<ShopContext.Consumer>
{context => (
<React.Fragment>
<Navigation
cartItemNumber={context.cart.reduce((count, curItem) => {
return count + curItem.quantity;
}, 0)}
/>
<main className="products">
<ul>
{context.products.map(product => (
<li key={product.id}>
<div>
<strong>{product.title}</strong> - ${product.price}
</div>
<div>
<button
Add to Cart
</button>
</div>
</li>
))}
</ul>
</main>
</React.Fragment>
)}
</ShopContext.Consumer>
);
}
}
export default ProductsPage;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment