CODEWITHSUNDEEP
react-nativereact-native-flatlist
Goowik
Goowik

Reputation: 803

FlatList rendering empty childs

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

Answers (1)

Kraylog
Kraylog

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

Related Questions