Here is the renderItem function:
const renderItem = ({item, index}) => {
getPost(item.id)
.then((postContent) => {
if (postContent.postType === 0) {
console.log(postContent);
console.log('Rendering type text post');
return <TextPost item={postContent} index={index} />;
} else if (postContent.postType === 1) {
console.log(postContent);
console.log('Rendering type image post');
return <ImagePost item={postContent} index={index} />;
} else {
console.log(postContent);
console.log('Rendering type link post');
return <LinkPost item={postContent} index={index} />;
}
})
.catch((err) => console.log(err));
};
renderItem works on an array of post ids that exist in my database. For each id, the FlatList should call my getPost method with item.id as a parameter, and then fetch the post data from my database with the corresponding post id. This works, as my console.log statements print out the correct data for the given array of post ids. However, the return statements do not return any components, and the FlatList renders blank.
Here is the FlatList in case that helps:
<FlatList data={data} renderItem={renderItem} style={styles.list} />