Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // context
- import React, { useState } from 'react'
- import { storeProducts, detailProduct } from './assets/data'
- const ProductContext = React.createContext()
- const ProductProvider = (props) => {
- const [products, setProducts] = useState(storeProducts);
- const [productDetails, setProductDetails] = useState(detailProduct)
- console.log(products)
- return (
- <ProductContext.Provider value={{
- products,
- productDetails
- }}>
- {props.children}
- </ProductContext.Provider>
- )
- }
- const ProductConsumer = ProductContext.Consumer;
- export { ProductProvider, ProductConsumer, ProductContext }
- /// Context usage
- import { ProductContext } from './context'
- export default function ProductList() {
- const appContext = useContext(ProductContext)
- const { products } = appContext
- console.log(appContext)
- return (
- <div className="py-5">
- <div className="container">
- <Title name="Product" title="Store"></Title>
- <div className="row">
- {/* <ProductConsumer>
- {(product) => <{product}}
- </ProductConsumer> */}
- {products.map(p => {
- return <h1>{p.title}</h1>
- })}
- </div>
- </div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement