How to get NFT metadata in React using getNFTs()

Moralis General
#1

Hi All

Iā€™m new to Javascript & React.

Iā€™m building an application that gets metatata (name, description, image) of an NFT.

Using the getNFTs() code found here in a useEffect hook like this


 const [nft, setNft] = useState([]);

 useEffect(() => {
        async function getNft() {
        
            const options = {
                chain: "chain",
                address: "walletaddress",
                token_address: "tokenaddress"
            };

            const polygonNFTs = await Web3Api.account.getNFTs(options);

            setNft(polygonNFTs.result.map(item => {
                return item.metadata
            }))
        }
        getNft()
    }, [])

I get the correct metadata back as an array of objects. But I canā€™t seem to be able to map through it (nft) to display the name, description and image.

I get ā€œCannot read properties of undefinedā€ or ā€œCannot read properties of nullā€

I would appreciate if anyone could point me in the right direction.

Thanks in advance

#2

Are you sure Moralis actually fetches the metadata along with other data? It can be null sometimes

#3

Hi, yes Iā€™m sure you can see it here - https://youtu.be/dAfKqirLWBI?t=310

At least I always get data returned.

Here is the example result. I am referring to the metadata

[
  {
    token_address: "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
    token_id: "15",
    contract_type: "ERC721",
    owner_of: "0x057Ec652A4F150f7FF94f089A38008f49a0DF88e",
    block_number: "88256",
    block_number_minted: "88256",
    token_uri: "string",
    metadata: "string",
    synced_at: "string",
    amount: "1",
    name: "CryptoKitties",
    symbol: "RARI",
  },
];

It looks like this example:

{"name":"NFT Name","description":"NFT description","image":"imagelink"}

#4

The issue seemed to be from the way you render your nft. Seemed youā€™re trying to access some properties before itā€™s defined. You can check if the property exist before rendering anything

#5

I came right you can close thread.