How to display data in flatlist from API - React Native - react-native

Question

Im following this tutorial tutorial link
I'm attempting to fetch data from rapidAPI (using axios) and the JSON object array looks far more complex than than whats in the tutorial url
I cannot get the data to render in a flatlist
The code im using is below (coverted from turorial to my rapidApi axios request)
import React, { useEffect, useState } from "react";
import { FlatList, Text, View } from "react-native";
import axios from "axios";
function NotificationScreen() {
const [isLoading, setLoading] = useState(true);
const [data, setData] = useState([]);
console.log(data);
const options = {
method: "GET",
url: "https://api-football-v1.p.rapidapi.com/v3/fixtures",
params: {
league: "39",
season: "2022",
from: "2023-02-04",
to: "2023-02-05",
},
headers: {
"X-RapidAPI-Key": "mykey",
"X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
},
};
useEffect(() => {
axios
.request(options)
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
})
.finally(() => setLoading(false));
}, []);
return (
<View style={{ flex: 1, padding: 24, backgroundColor: "purple" }}>
{isLoading ? (
<Text>Loading...</Text>
) : (
<View
style={{
flex: 1,
flexDirection: "column",
justifyContent: "space-between",
}}
>
<Text style={{ fontSize: 20, color: "white", textAlign: "center" }}>
Fetch content using Axios
</Text>
<Text style={{ fontSize: 18, color: "white", textAlign: "center" }}>
{data.title}
</Text>
<Text
style={{
fontSize: 14,
color: "white",
textAlign: "center",
paddingBottom: 10,
}}
>
Articles:
</Text>
<FlatList
data={data.fixture}
keyExtractor={({ id }, index) => id}
renderItem={({ item }) => (
<Text style={{ color: "white" }}>{item.id}</Text>
)}
/>
</View>
)}
</View>
);
}
export default NotificationScreen;
I think it is because the data returned are as objects (going by the console log below) and it possibly need to do something more complex to render the data in lets say the "fixture" array. The flatlist doesnt display if use the above code
The below console log shows the data is being successfully pulled but its the rendering i'm lost with. It works with the simple json in the tutorial
console log
Disclaimer - I'm new to coding and react native in general so some of my terminology may be off

Answer 1

From the data that has been returned from the API you just need to access the fixture attribute from the response as code below:
const [data, setData] = useState(null);
useEffect(()=>{
getData()
},[])
const getData=async()=>{
await axios
.request(options)
.then(function (response) {
// distruct the data object
const {data} = response;
setData(data.response.fixture)
})
.catch(function (error) {
console.error(error);
})
.finally(() => setLoading(false));
}