I am experiencing an issue with rendering a list from an array of objects that have the structure provided below. While I have successfully handled the promise and set the data to the state, I keep encountering an error specifically with this array. The data being rendered is in the form of an array on multiple screens, but for some reason, it is causing an error here.
The error
[Unhandled promise rejection: Error: Objects are not valid as a React child (found: object with keys {external_urls, href, id, name, type, uri}). If you meant to render a collection of children, use an array instead.]
The array in question: this.state.playlist.items
Array [
Object {
"added_at": "2020-12-06T06:43:39Z",
"added_by": Object {
"external_urls": Object {
"spotify": "https://open.spotify.com/user/",
},
"href": "https://api.spotify.com/v1/users/",
"id": "",
"type": "user",
"uri": "spotify:user:"",
},
"is_local": false,
... // remaining object properties
},
Attempting to render the list
<View style={{marginBottom: 310}}>
<FlatList
data = {this.state.playlist.items}
renderItem = {({ item }) => (
<ListItem bottomDivider >
<Avatar size={80} source={{uri: item.track.album.images[0].url}} />
<ListItem.Content>
<ListItem.Title>{item.track.name}</ListItem.Title>
<ListItem.Subtitle>{item.track.album.artists[0]}</ListItem.Subtitle>
</ListItem.Content>
<ListItem.Chevron />
</ListItem>
)}
keyExtractor={item => item.track.id}
/>
</View>