Reputation: 803
I seem to have an issue rendering the childs in a FlatList.
So, I'm creating a trading card deck building app. As a db I'm using a json file with around 1300 card objects.
CardScreen:
export default class CardsScreen extends React.Component {
constructor() {
super();
this.state = {
cards: []
}
}
componentDidMount() {
this.setState({
cards: cardsService.getCardsIds()
});
}
render() {
const {cards} = this.state;
return (
<View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
<View>
<Text>Cards Screen</Text>
<Text>Number of cards: {cards.length}</Text>
</View>
<View>
<FlatList
data={cards}
renderItem={(id) => <Text>id={cards[id]}</Text>}
keyExtractor={(id) => 'card-${id}'}
/>
</View>
</View>
);
}
}
During the componentDidMount, I retrieve all ids of each json object and create a simple array (state.cards). Normally I'd use a Card Component to render it out, but the list seemed empty, so I thought, as a test, to render the id's itself.
I clearly see 1000+ texts "id=" being rendered, unfortunately without the id value.
Not sure what I'm doing wrong here.
Upvotes: 0
Views: 1304
Reputation: 7563
The function you pass to renderItem
receives as a parameter your data entry wrapped in an object:
{
item: {... your object ...}
}
So to get it you can do the following:
renderItem={({item}) => <Text>id={cards[item.id]}</Text>}
renderItem
also sends a couple more stuff in that object. Take a look here.
Upvotes: 2