How to get NFT metadata in React using getNFTs()

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

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

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"}

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

I came right you can close thread.