CODEWITHSUNDEEP
javascriptreact-nativejsxreact-native-flatlist
Giacomo M
Giacomo M

Reputation: 4711

I have to use item.item.property in renderItem of a FlatList intead of item.property

I have this code 

<FlatList
    data={this.state.music_genres}
    extraData={this.state}
    renderItem={(genre) => (
        <ListItem>
            <CheckBox
                onPress={this.onGenreChange.bind(this, item.item, genre.item.id)}
                checked={this.eventHasGenre(item.item, genre.item.id) > -1 ? true : false} />
            <Body>
                <Text>{genre.item.name}</Text>
            </Body>
        </ListItem>
    )}
/>

It works, but as you can see I have to use "genre.item.id" (or "genre.item.name") instead of simply "genre.id".
If I change the renderItem in (like doc says to do) 

renderItem={({genre}) => ( // look brackets around "genre"

And I try with 

...
<Text>{genre.name}</Text>
...

I get this error

Cannot read property 'name' of undefined

This is the value of this.state.music_genres

[{…}]
0: {id: 7, name: "Swing", plural: null, language: "it", genre_type: "music"}
length: 1

Why I can not use "genre.id"?

Upvotes: 0

Views: 315

Answers (1)

Henrique Oecksler Bertoldi
Henrique Oecksler Bertoldi

Reputation: 1054

You can't use ({genre}) because this is a object destructuring. In this param will come a object (passed by react) with an attribute item, like this:

obj : { item: {...}}

so when you're trying to get genre from this obj, you only will get undefined because there is no genre in this object param.

Just do renderItem={({item}) => ( and use item.id and you'll be good.

Upvotes: 3

Related Questions