My current challenge involves fetching data from an API and utilizing it in various components through the Context API.
The issue arises when I receive a response, but it's wrapped under a Promise.[[PromiseValue]]. How can I properly fetch this data to make it usable within my components?
import React,{useState, useEffect, createContext} from 'react';
export const ProductsContext = createContext();
export const ProductsProvider = props => {
const [categories, setCategories] = useState({ categories: {} });
const [products, setProducts] = useState({ products: {} });
const [loading, setLoading] = useState(true);
useEffect(() => {
(async () => {
const [categoriesResult, productsResult] = await Promise.all([fetch('/api/categories'), fetch('/api/products')]);
setCategories(categoriesResult.json());
setProducts(productsResult.json());
setLoading(false);
})();
}, []);
return (
<ProductsContext.Provider value={ { products, categories, loading } }>
{props.children}
</ProductsContext.Provider>
);
}
Upon attempting to access the data within the context, the response is successfully retrieved, although encapsulated in a [[PromiseValue]]
import React from 'react';
import ProductsContainer from './Products/ProductsContainer';
import {ProductsProvider} from './Products/ProductsContext';
const Page = () => (
<>
<Header/>
<Banner/>
<ProductsProvider>
<ProductsContainer/>
</ProductsProvider>
</>
);
export default Page;
import React, { useContext } from 'react';
import { ProductsContext } from './ProductsContext';
const Products = () => {
const {products, categories, loading} = useContext(ProductsContext);
return (
<div className="products">
{
console.log(products)
}
</div>
);
};
export default Products;
The resulting response looks like this: