CODEWITHSUNDEEP
react-native
Kong Kvistad
Kong Kvistad

Reputation: 23

How do i render descriptive text for each FlatList item?

<FlatList
          data={[
            {id: '1'},
            {name: 'snus'},
            {pris: '32'},
          ]}
          renderItem={({item}) => <View style={styles.item}>
                                    <Text>{item.pris}{item.name}{item.id}</Text>
                                  </View>}
/>

When i render the items like this, they get properly formatted and each view is rendered as a listitem: click here for visual confirmation.

however, when i add descriptive text in front of each JSX element, it gets rendered for all the listitems, like this.

Code:

renderItem={({item}) => <View style={styles.item}>
                         <Text>pris: {item.pris}</Text>
                        </View>}

how do i solve this conceptually?

Upvotes: 0

Views: 39

Answers (1)

Milore
Milore

Reputation: 1672

Your renderItem prop

renderItem={({item}) => <View style={styles.item}>
                         <Text>pris: {item.pris}</Text>
                        </View>}

is properly formatted. The problem is the array of data that you're passing to the FlatList. Each item is supposed to have id, name and pris props. Instead you are creating an array with three objects, once per prop. I think your intention is to give an array with this structure instead:

[{id: '1', name: 'snus', pris: '32'}, { id: '2', name: 'snus_2', pris: '23'}]

Upvotes: 1

Related Questions