How To Display Data Using Flatlist In React Native?
Solution 1:
renderItem
accepts a function which takes the current list item as an argument and renders a component. You can think of it as the "map" function like in listItems.map(item => <MyListItem {...item} />
.
I'd recommend you create a presentational "card" component to encapsulate the view rendering logic (e.g. MarketingUpdateCard
) and just pass the list item data as props:
renderItem={({ item }) => (
<MarketingUpdateCard {...item} />
)}
And an example card component:
// MarketingUpdateCard.jsconstMarketingUpdateCard = ({ project_name, title, description, image }) => (
<View>
// your current card template here
</View>
)
Solution 2:
The renderItem
prop should be a function that returns a react-native component
See there : https://facebook.github.io/react-native/docs/flatlist#renderitem
data={marketing_updates}
renderItem = {
(update) => {
<Text>
update.project_name
</Text>
}
}
The renderItem()
method will be called for each element of your marketing_updates
array.
Solution 3:
According to the react-native docs the "renderItem" does the following:
Takes an item from data and renders it into the list.
So you can pass any kind of react component to it and the flat list will use this component as for every item inside your list. In your case you can do the following:
move your "CardView" to a new Component called for example "CardViewComponent".
Then you can do following to create a flatlist:
<FlatList
data={marketing_updates.length != 0 && marketing_updates ? marketing_updates : null}
renderItem={({item}) => {
<CardViewComponentmarketingData={marketing_updates[item.index]}/>
}}
/>
Post a Comment for "How To Display Data Using Flatlist In React Native?"