CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-native-flatlist
Julian
Julian

Reputation: 560

React FlatList renderItem

I've seen this sort of syntax in JS before and I am just curious how it works. In the React Native Docs for FlatList, an example calls renderItem. How does this._renderItem know that what individual list item it is working with? It looks like item is being destructured, but from what object? 

_renderItem = ({item}) => (
    <MyListItem
        id={item.id}
        onPressItem={this._onPressItem}
        selected={!!this.state.selected.get(item.id)}
        title={item.title}
    />
);

render() {
    return (
        <FlatList
            data={this.props.data}
            extraData={this.state}
            keyExtractor={this._keyExtractor}
            renderItem={this._renderItem}
        />
    );
}

Put differently: in FlatList, another way to make this same call could be:

<FlatList <other props> renderItem={({item}) => (<MyListItem ....) />

Is renderItem some special prop where {item} will always be the destructured arg?

Upvotes: 15

Views: 65412

Answers (5)

Idan
Idan

Reputation: 4023

 <ListItem
    data={this.state.data}
    key={(item,index)=>index.toString()}
    renderItem={({ item }) => <YourComponent item={item} /> }
  />

Upvotes: 2

Balasubramanian
Balasubramanian

Reputation: 5510

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
        )}
      />
 );
}

Upvotes: 15

Keshav Gera
Keshav Gera

Reputation: 11244

<FlatList
    data={['1', '2', '3', '4', '5', '6']}
    renderItem={({ item }) => (
        <Text>{ item }</Text>
    )}
/>

Output 1 2 3 4 5 6

Upvotes: 3

Parveen Chauhan
Parveen Chauhan

Reputation: 1496

import { places } from '../data/DataArray';

export const Home = (props) => {
    const renderPlace = ({ item }) => (
        <TouchableOpacity onPress={() => props.navigation.navigate('SingleTour')}>
            <Text style={styles.item}>{item.name}</Text>
        </TouchableOpacity>
    );
    return (
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <FlatList
                data={places}
                renderItem={
                    renderPlace
                }
            />
        </View>
    );
}

Upvotes: -1

Luis-Carlos
Luis-Carlos

Reputation: 41

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) }
      />
  );
}

Upvotes: 4

Related Questions