React Native FlatList renderItem does not return anything despite receiving correct data

Viewed 277

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} />
1 Answers

In Render, you can't use an async function, because render can't wait for your function to be executed. Rather do this stuff in componentDidMount create your array and put it in the state and use the state in flatlist.

Related