I am trying to recreate the Morarable tutorial in React, and am unable to fetch the tokenUri when using the cloud function āgetUserItemsā.
The tokenUri (which is a JSON url that needs to be fetched within each item) as the following structure (dummy data) :
{"name":"NFT 1","description":"12323","image":"https://ipfs.moralis.io:2053/ipfs/HicrzX9ge8ywjRHQrikN1TtMRCJvym2cnXjfCiT"}
I am using a solution that was previously suggested to me (looping through the getUserItems function and extracting the data) the only issue now is that within the loop I also need to make a fetch request to the tokenUri in order to display the name, description and image stored on IPFS of the NFT. I am able to fetch the data wehn I console.log it, but Iād like to save it in an array so I can access it via JSX.
Any thoughts?
import { useMoralis, useMoralisFile, useNewMoralisObject, useMoralisCloudFunction} from "react-moralis"
import {useState, useRef, useEffect} from 'react';
import Item from "./Item"
import { Button } from "@chakra-ui/button";
import { GetItems } from "./getItems";
export const UserItems = () => {
const {data, error, isLoading} = useMoralisCloudFunction("getUserItems");
let source = []
for(var i = 0; i < data.length; i++) {
var obj = data[i];
(async () => {
try {
const res = await fetch(obj.tokenUri)
const tokenInfo = await res.json()
//console.log(Object.keys(tokenInfo).length)
// source = {name: tokenInfo["name"], description:tokenInfo["description"]}
source.push(tokenInfo)
} catch (err) {
throw err
}
})()
}
return (
<>
{
source.map((item) => (
item.name
))
}
</>
)
}