.js

// 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>