CODEWITHSUNDEEP
react-nativereact-native-flatlist
akash89
akash89

Reputation: 891

Flat list is not rendering data

I am fairly new to React native. I am trying to use a Flat list, however, the list items does not display even though it shows the correct noumber of rows. Please check the image List with empty rows

This is basically the code I have put forward

import {View, Text, StyleSheet, FlatList} from 'react-native'
constructor(props){
    super(props)

    this.state = {
        listItem:[
            {key: 'Insert'},
            {key: 'View'},
            {key: 'Update'},
            {key: 'Delete'}
        ]
    }

}

render(){
        return(
            <View style={styles.container}>
                <View style={styles.header}>
                <Text style={styles.headerText}>Welcome Mr. {this.props.navigation.state.params.data
                ?this.props.navigation.state.params.data:"No data passed"}</Text>
                </View>
                <View style={styles.content}>
                    <FlatList
                    data ={this.state.listItem}
                    ItemSeparatorComponent = {this.FlatListItemSeparator}
                    renderItem = {(item)=>
                    <Text style={styles.item}
                    onPress={this.GetItem.bind(this, item.key)}>{item.key}</Text>}
                    />
                </View>

            </View>
        )
    }

What is that I am missing?

Upvotes: 1

Views: 195

Answers (1)

Milore
Milore

Reputation: 1672

The parameter that the renderItem functional prop turns you back needs to be destructured. It means that it contains a prop called item (and two others: index and separators) and it's not a generic parameter which YOU chose to call item.

So, in order to fix your problem, you can simply replace

renderItem = {(item)=>...

with

renderItem = {({ item })=>....

For a detailed explanation of FlatList and its renderItem prop, please take a look at the official RN doc.

Upvotes: 2

Related Questions