Get promisse response with fetch() - react-native

Question

I'm trying to get the json result of my API using fetch() to get data and I'm using async/await to wait promisse resolving, but when my function fetchArticlesList() returns in return responseJson I'm getting the promisse, like this: Promise {_40: 0, _65: 0, _55: null, _72: null} instead the json.
How can I get the json on my <Flatlist> component ?
<FlatList
data={(()=> {
if (this.props.data)
return this.props.data
const response = APIRequest.fetchArticlesList()
return response
})()
}
renderItem={(article) => (
...
)}
/>
The APIRequest:
async fetchArticlesList() {
try {
const response = await fetch(`${apiBackoffice}/articles`)
const responseJson = await response.json();
return responseJson; //this returns the promisse, instead of the json. I want to get the json
} catch (error) {
console.error(error)
}
}

Answer 1

APIRequest.fetchArticlesList() is async function, that's why it is returning a Promise object (take a look the document here). Load the API response into the state and when it is loaded pass it to the FlatList. Consider the following sample
class SomeComp extends React.Component {
constructor(props) {
super(props);
this.state = { data: [], isLoading: true }
}
componentDidMount() {
APIRequest.fetchArticlesList().then(data => {
this.setState({
data,
isLoading: false
});
});
}
render() {
const { isLoading, data } = this.state;
if (isLoading) {
return <ActivityIndicator .../>
}
return (
<FlatList
data={data}
...
/>
);
}
}
Hope this will help!