React Native: Basic FlatList to render API content - reactjs

Question

I am trying to render data from an API using a FlatList.
I can't get anywhere. I have a lot of trouble filling in the DATA and renderItem fields.
Could you help me ?
Thank you :)
import React from "react";
import { Text, ActivityIndicator, FlatList, View } from "react-native";
import axios from "axios";
export default class Results extends React.Component {
constructor(props) {
super(props);
//console.log('state',this.props)
this.state = {
city: "Montpellier", //this.props.city,
report: null, // Données de l'API
};
this.fetchWeather();
}
fetchWeather() {
axios
.get(
"https://api.openweathermap.org/data/2.5/weather?q=" +
this.state.city +
"&appid=9fce19ee0d267aa48afdf331bb1668da",
)
.then((response) => {
this.setState({ report: response.data });
//console.log(response.data)
});
}
render() {
const DATA = this.state.report;
if (this.state.report === null) {
return <ActivityIndicator size="large" color="red" />;
} else {
return (
<FlatList data={DATA} renderItem={<Text> {this.state.report.id} </Text>} keyExtractor={(item) => item.id} />
);
}
}
}

Answer 1

renderItem prop basically passes each item in your data to the function provided so that you can render them accordingly in the list. Changing you flatlist like this should work.
render() {
const {report} = this.state;
if (report === null) {
return <ActivityIndicator size="large" color="red" />;
} else {
return (
<FlatList
data={report}
renderItem={(reportItem) => <Text> {reportItem.id} </Text>}
keyExtractor={(item) => item.id} />
);
}
}

Answer 2

There are two mistakes in your Flatlist.
renderItem must be a function that returns all your JSX code
Since you already provided the Flatlist with data, you don't need to refer to this.state.report.id again, you can simply replace it with {item.id}.
So your Flatlist should look like this:
<FlatList
data={DATA}
keyExtractor={(item) => item.id}
renderItem={(item) => {
return (
<Text> {item.id} </Text>)
}}
</FlatList>

Answer 3

So the idea is that the FlatList will take in an array (<FlatList data={DATA} ...) and will automatically go through the items one by one. But it does not know how to render the actual UI for each item. For that we are giving a function which will transform each item into a UI element. This is the function that we are missing.
So
import React from "react";
import { Text, ActivityIndicator, FlatList, View } from "react-native";
import axios from "axios";
export default class Results extends React.Component {
.
.
.
render() {
const DATA = this.state.report;
if (this.state.report === null) {
return <ActivityIndicator size="large" color="red" />;
} else {
return (
<FlatList data={DATA} renderItem={function (item) {
return <Text> {item.id} </Text>
}} keyExtractor={(item) => item.id} />
);
}
}
}
As per the documentation, what they mean is that this function will be called and each item will be passed into it. The item shape will be of the same shape as DATA[0] (essentially any object in that array).
In the docs, they have this snippet,
const Item = ({ title }) => (
<View style={styles.item}>
<Text style={styles.title}>{title}</Text>
</View>
);
This essentially means that each object in the array is of shape
{
title: "some title"
}
That is called object destructuring, and it is easy to understand if you google for it :)