# Problem rendering flatlist data with api sauce

**URL:** <https://forum.codewithmosh.com/t/problem-rendering-flatlist-data-with-api-sauce/13749>\
**Category:** React Native\
**Created:** [July 17, 2022, 1:02pm UTC](https://forum.codewithmosh.com/t/problem-rendering-flatlist-data-with-api-sauce/13749 "2022-07-17T13:02:28Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![zakisb97](https://avatars.discourse-cdn.com/v4/letter/z/e19adc/32.png) [@zakisb97](https://forum.codewithmosh.com/u/zakisb97)\
**Post date:** [July 17, 2022, 1:02pm UTC](https://forum.codewithmosh.com/t/problem-rendering-flatlist-data-with-api-sauce/13749/1 "2022-07-17T13:02:28Z")

</div>

So i did purchase react native mosh course that teaches how to build the ‘Done with it’.so far everything is working fine. The only problem i keep encountering is rendering flatlist data using the api sauce hook that mosh did build in his course. When i reload expo the data doesn’t show yet when i hit save ‘cmd + s’ of my code the data get displayed successfully displayed. So i don’t understand why my data doesn’t get rendered when the component get mounted. At some point i had to skip the hook and use axios instead which was working fine. Can anyone please help me figure this problem out?  
HERE’S A BREAKDOWN OF MY CODE AND PROBLEM.

```auto
const getFoldersApi = useApi(foldersApi.getFolders);
const [foldersList, setFoldersList] = useState([]);

            useEffect(() => {
                getFoldersApi.request();
                setFoldersList(getFoldersApi.data);
              }, []);

          <FlatList
            style={styles.folders}
            /// here reside the problem
            data={foldersList}
            keyExtractor={(folder) => folder.Guid}
            renderItem={({ item, index }) => (
              <Card
                title={item.Nom}
                image={folderIcon}
                index={index}
                folderType={item.TypeDossier}
                folderState={item.EtatDossier}
                depositDate={item.DatedepoDossier}
                shippingType={item.TypeManifeste}
                vendor={item.Fournisseur}
                onPress={() => navigation.navigate("Détails", item)}
              />
            )}
          />

```

as you can see , for the data to show i have to hit save button on my code to show. my api call is working fine, i receive the data without a problem.

here’s built hook by mosh

```auto
import { useState } from "react";

export default useApi = (apiFunc) => {
  const [data, setData] = useState([]);
  const [error, setError] = useState(false);
  const [loading, setLoading] = useState(false);

  const request = async (...args) => {
    setLoading(true);
    const response = await apiFunc(...args);
    setLoading(false);

    if (!response.ok) return setError(true);

    setError(false);
    setData(response.data);
  };

  return { data, error, loading, request };
};

```

---

<div class="post-metadata">

**Author:** ![eelsholz](https://avatars.discourse-cdn.com/v4/letter/e/439d5e/32.png) [@eelsholz](https://forum.codewithmosh.com/u/eelsholz)\
**Post date:** [August 26, 2022, 1:13am UTC](https://forum.codewithmosh.com/t/problem-rendering-flatlist-data-with-api-sauce/13749/2 "2022-08-26T01:13:18Z")

</div>

My guess is that you need to `await` the `getFoldersApi.request()` in your `useEffect`, otherwise the `getFoldersApi.data` is still an empty array when you `setFoldersList`. According to [this article](https://devtrium.com/posts/async-functions-useeffect), it would look something like this:

```auto
useEffect(() => {
  const fetchData = async () => {
    await getFoldersApi.request();
    setFoldersList(getFoldersApi.data);
  }
  fetchData().catch(console.error);
}, []);

```