Passing down async fetched data via Context API - reactjs

Question

The data is not displaying in the child component Store. In the Storecomponent, the console.log in the useEffect() hook returns undefined. I suspect the reason being that the fetchAPI function in the parent component is only called after myContext.Provider is rendered, thus the value of myContext.Provider is undefined.
How can I pass the data(hook state) I fetched from the API in Stores(parent) down to Store(child) in this case?
export const myContext = createContext()
const Stores = () =>{
const [data, setData ] = useState([])
const fetchAPI = async() => {
var res = await fetch('https://fortnite-api.theapinetwork.com/store/get')
var result = await res.json()
var final= result.map(item => item)
setData(final)
}
useEffect(() =>{
fetchAPI().then(console.log(data))
}, [data])
return(
<div>
<myContext.Provider value={data} >
{data.map(item => {
return(
<div>
<ul>
<Link to={`stores/${item.itemId}`}><li>{item.item.name}</li></Link>
</ul>
</div>
)
})}
</myContext.Provider>
</div>
)
};
const Store = () => {
const specific = useContext(myContext)
useEffect(
() => {
console.log(specific)
}
)
return(
<>
{specific.map( item => {
return(
<div>
<h2> Description: {item.name}</h2>
</div>
)
})}
</>
)
}

Answer 1

The way you use fetch api isn't correct I think. fetch returns a promise, so you need to return the promise in your fetchAPI method if you want to uses .then().
.then() allow you to grab the promise and work with it, here is your code changed to work:
import React, { Component, useState, useEffect, createContext } from "react";
import { render } from "react-dom";
const myContext = createContext()
const App = () =>{
const [data, setData ] = useState([]);
const fetchAPI = () => {
// It return a promise
return fetch('https://fortnite-api.theapinetwork.com/store/get');
}
useEffect(() =>{
fetchAPI().then(data =>
// try to call .json() method. this method returns a promise
data.json().then(json => {
// if .json() succeed, then do your stuff
console.log(json);
setData(json.data.map(item => item));
})
)
// if .json() fails, promise is rejected with your error
.then(err => console.log('err', err));
}, []); // empty array to prevent looping (rule : do not update a state you are passing in this deps array)
return(
<div>
<myContext.Provider value={data} >
{data.map(item => {
return(
<div>
<ul>
<li><pre>{JSON.stringify(item)}</pre></li>
</ul>
</div>
)
})}
</myContext.Provider>
</div>
)
};
render(<App />, document.getElementById("root"));
Here is the repro on Stackblitz.