How to return a value from a React Native functional component to the parent - react-native

Question

In the case of this functional component, how can I return a value to another component that calls the function?
/**
* A custom fetch wrapper.
*/
import Config from '../config'
const _Fetch = (context: Object, endpoint: string, init: Object, key?: string) => {
var k = (typeof key !== 'undefined') ? key : 'data';
return fetch(Config.base+endpoint, init)
.then(response => {
if (response.ok) {
response.text().then((text) => {
var obj = tryParseJSON(text)
if (obj) {
// For jsonapi.
if (obj.data) {
obj = obj.data
}
var s = {
data: Object
}
s[k] = obj
context.setState(s)
return s // This value exists here, but how can I return it to the _Fetch caller?
}
})
.catch((error) => {
console.error(error)
})
}
})
function tryParseJSON(jsonString) {
try {
var o = JSON.parse(jsonString)
if (o && typeof o === "object") {
return o
}
}
catch (e) {
console.log(e)
}
return false
}
}
export default _Fetch
When I try to get the value in another function, it is undefined:
var myVar = _Fetch(context, end, init, key)
console.log(myVar); // undefined
Similar questions that don't quite help in my case:
React - Can A Child Component Send Value Back To Parent Form
How to return values from function - React native

Answer 1

The correct way to solve this problem would be to use Redux or some other store manager. If you are using redux then you can update store with new values and it will be available to all the components. This way, your parent can access it directly.
fetch operation is async and it can not directly return data to the invoking method.
If you don't want to use redux then a very standard javascript solution will be using callback.
You can pass a callback method to your fetch function. In your code, you can replace return s with a call to callback method.
e.g. replace return s with callback(s).