I’ve started learning API. I’ve made an app where the API has this result (It’s the F1 Motorsport API” from RapidAPI
{
"standings":{
"id":"0",
"name":"Driver",
"displayName":"Driver Standings",
"season":2024,
"seasonType":2,
"entries":[
{
"athlete":{
"id":"4665",
"uid":"s:2000~a:4665",
"displayName":"Max Verstappen",
"abbreviation":"VER",
"name":"Max Verstappen",
"shortName":"M. Verstappen",
"flag":{
"href":"https://a.espncdn.com/i/teamlogos/countries/500/ned.png",
"alt":"Netherlands",
"rel":[
"country-flag"
]
}
},
"stats":[
{
"name":"rank",
"displayName":"Rank",
"shortDisplayName":"RK",
"description":"Rank",
"abbreviation":"RK",
"type":"rank",
"value":1,
"displayValue":"1"
},
{
"name":"championshipPts",
"displayName":"Points",
"shortDisplayName":"PTS",
"description":"Championship Points",
"abbreviation":"PTS",
"type":"points",
"value":393,
"displayValue":"393",
"topFinish":1
},
{
"athlete":{
"id":"5579",
"uid":"s:2000~a:5579",
"displayName":"Lando Norris",
"abbreviation":"NOR",
"name":"Lando Norris",
"shortName":"L. Norris",
"flag":{
"href":"https://a.espncdn.com/i/teamlogos/countries/500/gbr.png",
"alt":"Britain",
"rel":[
"country-flag"
]
}
},
"stats":[
{
"name":"rank",
"displayName":"Rank",
"shortDisplayName":"RK",
"description":"Rank",
"abbreviation":"RK",
"type":"rank",
"value":2,
"displayValue":"2"
},
{
"name":"championshipPts",
"displayName":"Points",
"shortDisplayName":"PTS",
"description":"Championship Points",
"abbreviation":"PTS",
"type":"points",
"value":331,
"displayValue":"331",
"topFinish":1
},
}
But when I implement it in my code like this
import React, { useEffect, useState } from "react";
import { StyleSheet, View, Text, TouchableOpacity, FlatList } from "react-native";
import axios from "axios";
function DriverStandings(props) {
const [standings, setStandings] = useState([]);
useEffect(() => {
const fetchStandings = async () => {
const options = {
method: "GET",
url: "https://f1-motorsport-data.p.rapidapi.com/standings-controllers",
params: { year: "2024" },
headers: {
"x-rapidapi-key": "api key example",
"x-rapidapi-host": "f1-motorsport-data.p.rapidapi.com",
},
};
try {
const response = await axios.request(options);
setStandings(response.data.standings.entries);
} catch (error) {
console.error(error);
}
};
fetchStandings();
}, []);
const renderItem = ({ item }) => {
const rank = item.stats.find(stat => stat.name === "rank")?.displayValue;
const points = item.stats.find(stat => stat.name === "championshipPts")?.displayValue;
const driverName = item.athlete.displayName;
return (
<TouchableOpacity
onPress={() => props.navigation.navigate("DriverDetail", { driverId: item.athlete.id })}
style={styles.button}
>
<View style={styles.rect2}>
<Text style={styles.number}>{rank}</Text>
<Text style={styles.name}>{driverName}</Text>
</View>
<View style={styles.rect3}>
<Text style={styles.points}>{points}</Text>
</View>
</TouchableOpacity>
);
};
return (
<View style={styles.container}>
<FlatList
data={standings}
renderItem={renderItem}
keyExtractor={(item) => item.athlete.id.toString()}
/>
</View>
);
}
export default DriverStandings;
The result won’t load and it says that undefined id when I check it through console? What’s wrong with my code. Is it because I called it wrongly in my code? Thanks in advance
