Map function does not return items in React JSX

Question

Outside my PlaylistsLinks component I initialize the folders variable and then I run a Firebase function that iterates through all the folder names and pushes it to the folders array. My map function does not iterate through my folders array even though I can console.log my array within my component. Is there a specific way I have to pass the array into the functional component in order to use map?

import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import  firebaseConfig from "../dropzone/config";



if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);

 }else {
    firebase.app(); // if already initialized, use that one
 }

let fb_storage = firebase.storage();
let storageRef = fb_storage.ref();  

let rootRef = storageRef.root;

let folders = [];



rootRef.listAll().then(function(res) {
    res.prefixes.forEach(function(folderRef) {
        // console.log(folderRef.name)
        folders.push(folderRef.name)
        
        // All the prefixes under listRef.
        // You may call listAll() recursively on them.
    });
    res.items.forEach(function(itemRef) {
        // All the items under listRef.
        // console.log(itemRef.name);
    });
    }).catch(function(error) {
    // Uh-oh, an error occurred!
    }); 

   

const PlayListLinks = () =>{
    
   
console.log(folders);

    return(
        <>
            <ul>
                {folders.map((folder, index) => {
                    return <li key={index}> {folder}</li>
                })}
            </ul>
        </>
    )
}

export default PlayListLinks

Does this answer your question? How do I return the response from an asynchronous call? — Randy Casburn
– Randy Casburn, Commented Dec 15, 2020 at 20:46
you'll need to implement one of the hooks to update folders so that it is rendered. — Randy Casburn
– Randy Casburn, Commented Dec 15, 2020 at 20:48
are you able to check the value of foldeRef within the prefixes.forEach to know if the object even exist and has the object structure you expect? I'd put a debugger and inspect — AGE
– AGE, Commented Dec 15, 2020 at 20:51

Ketan Ramteke · Accepted Answer · 2020-12-15 20:51:41Z

2

create a state and then update it with fetched folder list:

import React, { useState, useEffect, useRef } from 'react';
import firebase from "firebase/app";
import storage from "firebase/storage";
import  firebaseConfig from "../dropzone/config";

if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig);

 }else {
    firebase.app(); // if already initialized, use that one
 }

let fb_storage = firebase.storage();
let storageRef = fb_storage.ref();  

let rootRef = storageRef.root;

const PlayListLinks = () =>{
const [folders, setFolders] = useState([])

useEffect(()=>{
    rootRef.listAll().then(function(res) {
    let temp = []
    res.prefixes.forEach(function(folderRef) {
        temp.push(folderRef.name)
    });
    setFolders(temp);
    res.items.forEach(function(itemRef) {
        // All the items under listRef.
        // console.log(itemRef.name);
    });
    }).catch(function(error) {
    // Uh-oh, an error occurred!
    }); 

},[])
   
console.log(folders);

    return(
        <>
            <ul>
                {folders.map((folder, index) => {
                    return <li key={index}> {folder}</li>
                })}
            </ul>
        </>
    )
}

export default PlayListLinks

answered Dec 15, 2020 at 20:51

Ketan Ramteke

10.7k2 gold badges27 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

oxxi Over a year ago

Beautiful. This works. I had also tried using useEffect but I was doing it wrong. Thank you.

Ketan Ramteke Over a year ago

Glad it helped, welcome, and happy coding :)

GoodStuffing123 · Accepted Answer · 2020-12-15 20:55:06Z

0

The problem is you have to return your JSX directly from the function within .map

Like so:

{folders.map((folder, index) => <li key={index}>{folder}</li>)}

or:

{folders.map((folder, index) => (
    <li key={index}>{folder}</li>
)}

answered Dec 15, 2020 at 20:55

GoodStuffing123

17210 bronze badges

Collectives™ on Stack Overflow

Map function does not return items in React JSX

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related