dynamically displaying scrolling list of characters via FlatList - reactjs

Question

I have an array in a file called arrays.js like this:
export var Characters = [
{
id: 1,
Name: "Dirk Longsword"
Avatar: require('./images/profile1.png')
},
{
id: 2,
Name: "Msal Reaper"
Avatar: require('./images/profile2.png')
},
{
id: 3,
Name: "Stone Rockthrow"
Avatar: require('./images/profile3.png')
}
]
On my main screen, I'm trying to write it all out dynamically via a scrollable like this:
import {Characters} from './arrays';
render() {
return (
<FlatList
data={Characters}
keyExtractor={
character => character.Name
}
renderItem={
({character}) => (
<View style={[styles.flexRow]}>
<Text>
{character.Name}
</Text>
<Image style={[ styles.charImage ]}
source={character.Avatar}
/>
</View>
)
}
/>
}
But I keep getting this error:
'undefined' is not an object(character.Name)
I'm not sure what I'm doing wrong and could use a helping hand.
Thanks!

Answer 1

First, I'll be ignoring the many syntax errors in the code you posted.
Second, you are misunderstanding how { } destructuring works in Javascript. You are attempting to destructure character from the data passed to Flatlist's renderItem. There is no such key value for the object passed to renderItem. If you look at the docs, you'll see there there are only the following keys:
item <- This contains the "character" object that you are trying to access.
index
separators
You can fix your code in two ways. One of which is to not destructure at all:
renderItem={
(character) => (
<View style={[styles.flexRow]}>
<Text>
{character.item.Name}
</Text>
<Image style={[ styles.charImage ]}
source={character.item.Avatar}
/>
</View>
)
}
The other is to destructure item and use that in the manner you're trying to do with character:
renderItem={
({item}) => (
<View style={[styles.flexRow]}>
<Text>
{item.Name}
</Text>
<Image style={[ styles.charImage ]}
source={item.Avatar}
/>
</View>
)
}