SHARE
TWEET

Untitled

a guest Jul 16th, 2019 59 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // context
  2. import React, { useState } from 'react'
  3. import { storeProducts, detailProduct } from './assets/data'
  4.  
  5. const ProductContext = React.createContext()
  6.  
  7. const ProductProvider = (props) => {
  8.   const [products, setProducts] = useState(storeProducts);
  9.   const [productDetails, setProductDetails] = useState(detailProduct)
  10.   console.log(products)
  11.   return (
  12.     <ProductContext.Provider value={{
  13.       products,
  14.       productDetails
  15.  
  16.     }}>
  17.       {props.children}
  18.     </ProductContext.Provider>
  19.   )
  20. }
  21. const ProductConsumer = ProductContext.Consumer;
  22. export { ProductProvider, ProductConsumer, ProductContext }
  23.  
  24. /// Context usage
  25.  
  26. import { ProductContext } from './context'
  27. export default function ProductList() {
  28.   const appContext = useContext(ProductContext)
  29.   const { products } = appContext
  30.  
  31.   console.log(appContext)
  32.   return (
  33.     <div className="py-5">
  34.       <div className="container">
  35.         <Title name="Product" title="Store"></Title>
  36.         <div className="row">
  37.           {/* <ProductConsumer>
  38.             {(product) => <{product}}
  39.           </ProductConsumer> */}
  40.           {products.map(p => {
  41.             return <h1>{p.title}</h1>
  42.           })}
  43.         </div>
  44.       </div>
  45.     </div>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top