Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

100
Views
Weird behavior when mapping over zipped array containing async data

I'm attempting to grab data from firestore, then grab the url's of images stored in firebase storage, then zip the two pieces of data together so I can send both at once as props to a component. My problem is that when I try to access the second element of my array, it only returns undefined. Here is the section of code in question, where I'm grabbing the data and trying to send it to a component:

...
const [slimes, setSlimes] = useState([]);

useEffect(() => {
    let mounted = true;

    const getSlimes = async () => {
        const snap = await getDoc(docRef);
        if (!snap.exists()) return;

        // Grab ids, map them into an array
        let data = snap.data().slimes.map((id) => {return [id]});

        // Grab urls, zip with ids
        data.map(async (id) => {
            let fetchURL = process.env.REACT_APP_BUCKET + path + id[0] + ".png";
            const url = await getDownloadURL(ref(storage, fetchURL));
            id.push(url);
        });

        if (mounted) setSlimes(data);
    };

    getSlimes();
    return () => { mounted = false; }
}, []);

if (!slimes.length) {
    return <LinearProgress />;
} else {
    console.log(slimes);
    return (<>
        <div id="inv-header">{discordid}'s Slimes</div>
        <div id="cards-container">
            {slimes.map((slime) => {
// Bugged part
                console.log(slime);
                console.log(slime[0] + " || " + slime[1]); 
                return (<SlimeCard key={slime[0]} slimeid={slime[0]} url={slime[1]}/>);
            })}
        </div>
    </>);
}

When I'm mapping over my state I can access the first element of the array, but the second one only shows undefined. When I console log the singular mapped object I see the correct url and id. Before I even map the state object it still contains all of the correct data. Here is an image of my output on an example run:

enter image description here

All my data is correct, this has to be some semantics issue with javascript I don't understand, some insane asynchronous issue, or something really obvious. This problem, at least to me, seems really low level so I haven't been able to come up with much in terms of solutions.

This has been bugging me for days, I've gone through like 5 different major iterations trying to get these url's to pass properly with zero luck.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!