Can not render array within FlatList - reactjs

Question

I have read all similar questions in stack overflow on this topic. Yet my info is not being displayed.
I am fetching locations from tomtom api. I have limit the result up to one location for simplicity. My data:
items: Array [
Object {
"address": Object {
"country": "United States",
"countryCode": "US",
"countryCodeISO3": "USA",
"countrySecondarySubdivision": "Hidalgo",
"countrySubdivision": "TX",
"countrySubdivisionName": "Texas",
"extendedPostalCode": "78542-7214",
"freeformAddress": "1718 South 28th Avenue, Edinburg, TX 78542",
"localName": "Edinburg",
"municipality": "Edinburg",
"postalCode": "78542",
"streetName": "South 28th Avenue",
"streetNumber": "1718",
},
"dist": 7911851.058335642,
"entryPoints": Array [
Object {
"position": Object {
"lat": 26.28239,
"lon": -98.14742,
},
"type": "main",
},
],
"id": "840489007442969",
"info": "search:ta:840489007442969-US",
"poi": Object {
"categories": Array [
"company",
"equipment rental",
],
"categorySet": Array [
Object {
"id": 9352038,
},
],
"classifications": Array [
Object {
"code": "COMPANY",
"names": Array [
Object {
"name": "equipment rental",
"nameLocale": "en-US",
},
Object {
"name": "company",
"nameLocale": "en-US",
},
],
},
],
"name": "Wylie Implement Edinbu",
"phone": "[phone]",
},
"position": Object {
"lat": 26.28223,
"lon": -98.1464,
},
"score": 1.9846990108,
"type": "POI",
"viewport": Object {
"btmRightPoint": Object {
"lat": 26.2813,
"lon": -98.14536,
},
"topLeftPoint": Object {
"lat": 26.28316,
"lon": -98.14744,
},
},
},
]
My component:
const AutocompleteResults = (props) => {
const [locations, setLocations] = useState(props.items);
console.log("items: ", locations);
useEffect(() => {
setLocations(props.items);
}, [props.items]);
return (
<View style={{ flex: 1, marginBottom: 20 }}>
<Text>Result</Text>
{locations.length>0 ? (
<>
<Text>Items</Text>
<FlatList
style={{ flex: 1, borderColor: "red", borderWidth: 1 }}
horizontal={false}
data={locations}
keyExtractor={(item, index) => index.toString()}
renderItem={({location}) => {
console.log("single location ", location);
return <Text>Location</Text>;
}}
/>
</>
) : null}
</View>
);
};
const style = StyleSheet.create({
viewStyle: {
flex: 1,
justifyContent: "center",
},
});
export default AutocompleteResults;
What I see on the console is: single location undefined
I tried all the suggestions which I found in stack overflow. In my opinion the problem is in extractKey method but I dont know how to fix it.
On the screen I just see the words "Result" "Items" followed by red dash (coming from my styling for flatlist)
EDIT:
I edited my render function in the following way:
renderItem={({ item }) => {
console.log("single location ", item);
return (
<View style={{ flex: 1, height: 30 }}>
<Text>Location</Text>
</View>
);
}}
But the "Location" text still does not display

Answer 1

You are destructuring location in the renderItem function of the FlatList. This fails, because there is no such parameter. The parameter is called item.
This is explained in the documentation.
renderItem({ item, index, separators });
item (Object): The item from data being rendered.
The following code should fix the issue.
return (
<View style={{ flex: 1, marginBottom: 20 }}>
<Text>Result</Text>
{locations.length>0 ? (
<>
<Text>Items</Text>
<FlatList
style={{ flex: 1, borderColor: "red", borderWidth: 1 }}
horizontal={false}
data={locations}
keyExtractor={(item, index) => index.toString()}
renderItem={({item}) => {
console.log("single location ", item);
return <Text>Location</Text>;
}}
/>
</>
) : null}
</View>
);
};
The extractKey function is fine.