React Context Unable to set context - reactjs

Question

import { createContext } from 'react';
import axios from 'axios'
import keys from '../../keys'
const getCollection = () => {
console.log("getCollectionCalled")
return axios.get(`${keys.url}/collection`)
.then(data => {
console.log(data)
return data
})
.catch(err => {
return {}
})
}
const SHOP_DATA = getCollection();
const CollectionsContext = createContext(SHOP_DATA);
export default CollectionsContext;
This is the code I am trying to run but context is not setting as per the data from the server, when I am using this in other component like this
const collections = useContext(CollectionsContext);
console.log("COLLECTIONS ", collections)
It is consoling it as :
COLLECTIONS Promise {<pending>}__proto__:
Promise[[PromiseStatus]]: "resolved"
[[PromiseValue]]: undefined
Kindly rectify me I am unable to think how may I implement it.

Answer 1

In this case you're returning a promise as initial context value, what you need to do is something between these lines:
import React, { useState, useEffect, createContext, useContext } from 'react'
import axios from 'axios'
import keys from '../../keys'
const INITIAL_STATE = {}
const CollectionsContext = createContext(INITIAL_STATE)
const Provider = ({ children }) => {
const [collection, setCollection] = useState()
useEffect(() => {
axios.get(`${keys.url}/collection`)
.then(data => setCollection(data))
.catch(() => setCollection(INITIAL_STATE))
}, [])
return (
<CollectionsContext.Provider value={collection}>
{children}
</CollectionsContext.Provider>
)
}
export const useCollection = () => useContext(CollectionsContext)
export default Provider
Then you wrap the top level (as high as it's needed, not neccessarily the highest) with the provider:
import CollectionsProvider from '.../.../somewhere'
<CollectionsProvider>...rest of components...</CollectionsProvider>
In this case, INITIAL_STATE is the value provided until value is undefined or you haven't used Provider. For example, you use useCollection outside of CollectionsProvider.