'Trying to retrieve folder names from firebase storage and display them

I'm trying to retrieve a list of folder names from firebase storage and display the names. I'm struggling to make the retrieval an async function which is prevents me from being able to return it as a jsx object

function listItems() {
var itemList = []

// Find all the prefixes and items.
listAll(listRef)
  .then((res) => {
    res.prefixes.forEach((folderRef) => {
      // All the prefixes under listRef.
      // You may call listAll() recursively on them.
      itemList.push(folderRef.name)
    });
    res.items.forEach((itemRef) => {
      // All the items under listRef.
    });
  }).catch((error) => {
    // Uh-oh, an error occurred!
  });

 return itemList.map((items) => {<a>items<a>})
}

I've tried to make the function an async function but got this error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead

I've tried to use a state hook inside the forEach loop, but it turns into an infinite loop.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source