React FlatList renderItem
<FlatList
data={['1', '2', '3', '4', '5', '6']}
renderItem={({ item }) => (
<Text>{ item }</Text>
)}
/>
Output 1 2 3 4 5 6
data prop - need to pass an array of data to the FlatList via the data prop
. That’s available on this.props.data.
renderItem prop - Then you want to render the content with the renderItem
prop. The function is passed a single argument, which is an object. The data you’re interested in is on the item key
so you can use destructuring to access that from within the function. Then return a component using that data.
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item }) => (
// return a component using that data
)}
/>
);
}
adding to what @Balasubramanian stated, the renderItem
points to the current item
and since you are using a List
component as a wrapper then you can also use the 'ListItem' component inside the renderItem
function to render
the current item
's data, like so:
renderItem={({ item, index }) => {
return (
<ListItem
key={index}
title={item.name}
onPress={ () => this.assetSelected(item) }
/>
);
}