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": " 1 956-550-8822",
},
"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
CodePudding user response:
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.