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:
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.