Api fetching in react native - using axios - react-native

Question

I am trying to fetch data from API game news.
Link of API: https://rapidapi.com/danielilieprojects-G7QdvK7X5Ao/api/videogames-news2/
I am not getting any data from the API.
It looks like API is giving me infomation in string, so I thnik mybe its problem there.
Any Ideas what is wrong with my code?
API returns this data:
{
"title": "GTA 6 release date rumours, news, and speculation",
"date": "Fri, 03 Feb 2023 17:06:57 +0000",
"description": "Want to know more about the GTA 6 release date? Given how many years it takes to create open worlds of the same calibre as GTA V, it’s no surprise that Rockstar Games has already spent years developing GTA 6. Like most developers, Rockstar prefers to keep its secrets close to its chest until they’re close to the end of development, so we may not see any official GTA 6 gameplay for some time. Early gameplay footage of GTA 6 recently surfaced online, along with lines of source code from the game itself. Rockstar has issued a statement on Twitter which confirms that an unauthorised third party managed to access and download information from their systems, including development footage for the open-world game. However, its statement notes that the developers don’t believe this leak should impact the development of their long-term projects or disrupt their live service games.",
"image": "https://www.pcgamesn.com/wp-content/sites/pcgamesn/2022/02/gta-6-release-date-2022.jpg",
"link": "https://www.pcgamesn.com/grand-theft-auto-vi/gta-6-release-date-setting-map-characters-gameplay-trailers"
}
Games component
import { StyleSheet, SafeAreaView, FlatList } from "react-native";
import axios from "axios";
import { useState, useEffect } from "react";
import Article from "../components/Article";
export default function Games() {
let [articles, setArticles] = useState([]);
const getArticle = () => {
axios
.get({
method: "GET",
url: "https://videogames-news2.p.rapidapi.com/videogames_news/search_news",
params: { query: "GTA" },
headers: {
"X-RapidAPI-Key":
"8114fa0745msh7596481771a0acbp1eb7e4jsnaae758420c49",
"X-RapidAPI-Host": "videogames-news2.p.rapidapi.com",
},
})
.then(function (response) {
setArticles(response.data);
})
.catch(function (error) {
console.log("error", error);
})
.finally(function () {
setLoading(true);
});
};
useEffect(() => {
getArticle();
}, []);
return (
<SafeAreaView style={styles.container}>
<FlatList
data={articles}
renderItem={({ item }) => (
<Article
image={item.image}
title={item.title}
description={item.description}
sourceName={item.source.name}
/>
)}
keyExtractor={(item) => item.title}
/>
</SafeAreaView>
);
}

Answer 1

Axios returns a data object with the response. This is where the your data is stored. To make sure your data is correct you can do a console.log
.then(function (response) {
// console.log(response);
setTitle(response.data[0].item.title);
setArticle(response.data[0].item.description);
})

Answer 2

There are a few issues with your code:
You are using axios.get instead of axios.get method. The correct syntax is axios.get(url, [config]) where url is the URL to access and config is an optional configuration object.
In your response, you are trying to access the data as response[0] but the actual data structure is unknown. You should use response.data to access the data.
You are trying to map title and article directly from the response, but you have not assigned the response data to these state variables correctly. You need to update the state values inside the .then block, like this:
.then(function (response) {
setTitle(response.data);
setArticle(response.data);
}