React Native FlatList

Question

new to React Native but I have an array of data

list = [
{key: "image1", imgLink: "imagelink"},
{key: "image2", imgLink: "imagelink"},
{key: "image3", imgLink: "imagelink"},
{key: "image3", imgLink: "imagelink"},
]

which is passed in props to my component and then I put it in state in my constructor

constructor(props){
    super(props)
    this.state = {
        portraitImage: 'initalImageLink',
        isModalVisible: false,
        list: this.props.list,
    };


}

I also have a FlatList inside of a modal:

<Modal isVisible={this.state.isModalVisible} onBackdropPress = {this._hideModal}>
    <View style={{ flex: 1, backgroundColor:'#FFFFFF'}}>
        <FlatList 
            data={this.state.list} 
            renderItem={
                ({item}) => <ListItem onPress = {this._setImg.bind(this,item.imgLink)} title={item.key} />
            }
        />

        <Button title = {'Close Modal'} onPress={this._hideModal}/>      
    </View>
</Modal>


_setImage(value){
    this.setState({
        portraitImage: value
    });
};

I am trying to just show the list of Key names (image1, image2, image3, image4) and then when the user presses one of the key names it will change portraitImage state.

This is what I have right now but my FlatList seems to be blank and show nothing. I dont understand why the list is blank.

When i set data = {this.props.list} instead of state I get

Element type is invalid: expected a string (for built-in components) or >a class/function (for composite components) but got: undefined. You >likely forgot to export your component from the file it's defined in.

Answer 1

It doesn't make sense because this.state.list and this.props.list shouldn't be different. At least that's what I can read from the code you provided.

What I can say is:

Element type is invalid: expected a string (for built-in components) or >a class/function (for composite components) but got: undefined. You >likely forgot to export your component from the file it's defined in.

It says that 'undefined' was used as a type, which it is not! My guess is that <ListItem .../> is undefined.

React-native doesn't have a build-in ListItem type. react-native-elements does, but I'm not sure if their ListItem type can be rendered like a normal <View /> type. Can you add your imports and props definitions (if any) so we can see what's what?

Could you try <TouchableHighlight .../> instead of <ListItem .../> to check if the error persists?

Answer 2

this is a simpe example how to show data in flat list, if you share more code we can give you better example

constructor(props) {
super(props)
this.state = {
  list: []
};
}

getList = () => {
const li = [
  { key: "image1", imgLink: "imagelink" },
  { key: "image2", imgLink: "imagelink" },
  { key: "image3", imgLink: "imagelink" },
  { key: "image3", imgLink: "imagelink" },
]

this.setState({
  list: li
})
}

componentWillMount() {
this.getList()
}

render() {
return (
  <View style={{ flex: 1, backgroundColor: '#FFFFFF' }}>
    <FlatList
      data={this.state.list}
      renderItem={({ item }) => <Text>{item.key}</Text>}
    />
  </View>);
}
}

Answer 3

Instead of ListItem you could use TouchableOpacity and on clicking the item you could console the clicked item, the code is as below.

<TouchableOpacity onPress={()=>console.log("item: ",item.key)}>
    <Text >{item.key}</Text>
</TouchableOpacity>