undefined is not a function (near '....data.map....') |React native - reactjs

Question

I am new to React native and trying to destructure the json response which i have got from my API call using the map function and somehow it is giving me the above error. I want to display the aqi and dominant pollutants using a text componenet. I am using the AQICN API.
import React,{ useState , useEffect} from 'react';
import { StyleSheet, Text, View ,ActivityIndicator, ScrollView,FlatList} from 'react-native';
import * as Location from 'expo-location';
export default function HomeScreen({navigation}) {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
//Lat and Long
const [latitude, setLatitude] = useState(null);
const [longitude , setLongitude]= useState(null);
const [data, setData] = useState([]);
const [loader, setLoader]=useState(true);
useEffect(() => {
(
async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission Denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
//Changes
setLatitude(location.coords.latitude);
setLongitude(location.coords.longitude);
const la=latitude;
const lo=longitude;
async function AqicnApiCall() {
let res = await fetch("https://api.waqi.info/feed/geo:"+ latitude +";"+ longitude +"/?token=ac3a71fc80931abd95ede14c2040f0678f578703")
.then((response) => response.json())
.then((json) => setData(json.data))
.catch((error) =>console.log(error))
}
AqicnApiCall();
})();
}, [latitude, longitude]);
//const obj=JSON.stringify(data);
return (
<ScrollView style={styles.container}>
{
data.map((d) =>{
console.log(d);
return(
<Text style={styles.container}>{d.data.aqi}</Text>
)
})
}
</ScrollView>
);
}
const styles= StyleSheet.create({
container: {
padding:20,
marginTop:15,
margin:10,
},
paragraph : {
padding:20,
marginTop:5,
}
});
This is the API response, i need the dominant pollutant and aqi.

Answer 1

Working App: Expo Snack
Access aqi and dominentpol like below:
return (
<ScrollView style={styles.container}>
<Text style={styles.container}>AQI: {data?.aqi}</Text>
<Text style={styles.container}>
Dominant Pollutant: {data?.dominentpol}
</Text>
</ScrollView>
);
}
Full Working code:
import React, { useState, useEffect } from 'react';
import {
StyleSheet,
Text,
View,
ActivityIndicator,
ScrollView,
FlatList,
} from 'react-native';
import * as Location from 'expo-location';
export default function HomeScreen({ navigation }) {
const [location, setLocation] = useState(null);
const [errorMsg, setErrorMsg] = useState(null);
//Lat and Long
const [latitude, setLatitude] = useState(null);
const [longitude, setLongitude] = useState(null);
const [data, setData] = useState([]);
const [loader, setLoader] = useState(true);
useEffect(() => {
(async () => {
let { status } = await Location.requestPermissionsAsync();
if (status !== 'granted') {
setErrorMsg('Permission Denied');
return;
}
let location = await Location.getCurrentPositionAsync({});
setLocation(location);
//Changes
setLatitude(location.coords.latitude);
setLongitude(location.coords.longitude);
const la = latitude;
const lo = longitude;
async function AqicnApiCall() {
let res = await fetch(
'https://api.waqi.info/feed/geo:' +
latitude +
';' +
longitude +
'/?token=ac3a71fc80931abd95ede14c2040f0678f578703'
)
.then((response) => response.json())
.then((json) => {
console.log('data: ', json.data);
setData(json.data);
})
.catch((error) => console.log(error));
}
AqicnApiCall();
})();
}, [latitude, longitude]);
//const obj=JSON.stringify(data);
return (
<ScrollView style={styles.container}>
<Text style={styles.container}>AQI: {data?.aqi}</Text>
<Text style={styles.container}>
Dominant Pollutant: {data?.dominentpol}
</Text>
</ScrollView>
);
}
const styles = StyleSheet.create({
container: {
padding: 20,
marginTop: 15,
margin: 10,
},
paragraph: {
padding: 20,
marginTop: 5,
},
});

Answer 2

As data isn't an array, and I see that you just want to display aqi value,
<ScrollView style={styles.container}>
<Text style={styles.container}>{data?.aqi}</Text>
</ScrollView>
On the screenshot, it seems that you can only iterate on data.attributions.
<ScrollView style={styles.container}>
{data.attributions.map(attr => <Text>{attr.something}</Text>}
</ScrollView>

Answer 3

I think some of d.data is undefined or null. Please try this.
<ScrollView style={styles.container}>
{
data && data.map((d) =>{
console.log(d);
return(
<Text style={styles.container}>{d?.data?.aqi}</Text>
)
})
}
</ScrollView>