Rarible clone part 13 (Listing Items) (Using React with tailwindCSS)

Moralis General
#1

Iā€™m trying to list Items using the ā€œgetItemsā€ cloud function.
Iā€™m getting the data back in ā€œdataā€.
But how to fetch data from token_uri of each object in ā€œdataā€.

I want to replace these exclamation marks in the code snippet with a logic which fetches data from token_uri of each object which I got from ā€œgetItemsā€ cloud function

MarketCard is a react component that renders cards for each NFT. Iā€™m passing src, NFTname and description as a prop.

const Item is an array of Javascript object which will store details of each object from ā€œdataā€


import React, { useState, useEffect } from 'react'
import { useMoralisCloudFunction } from 'react-moralis'
import MarketCard from './components/MarketCard'


const MarketPlace = () => {
    const {data} = useMoralisCloudFunction("getItems");
    const item = [{
        "myId":"",
        "owner":"",
        "name":"No NFTs",
        "desc":"No Description",
        "price":"",
        "source":"./random.svg",
    }];


!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!   



 console.log(item);
    return (
        <div className="relative bg-gradient-to-r from-primary to-secondary">
        <h1 className="px-4 py-4 text-my-black-color">1 results</h1>
             <div className="grid sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 h-screen ">
          
{item.map(one => (
                <MarketCard 
                key={one.myId}
            name={one.name}
            description={one.desc}
            source={one.source}
            />
             ))}
              
         </div>
        </div>
       
    )
}

export default MarketPlace
#2

maybe using this function works for you: NFTOwners beforesave function failing after update

that function could be used in cloud code

#3 
const {data} = useMoralisCloudFunction("getItems");

The cloud functions are fine.
With the above code, Iā€™m getting the array of objects from the ItemsForSale Table in the ā€œdataā€ variable but Iā€™m not able to build a logic that can extract details from token_Uri of each object.

#4

can you get to the point where you can print to the console each token_uri?
if yes, then you can extract the information by accessing that token_uri

#5 
const items = async function(){
      await data?.map(it => {
         fetch(it.tokenuri)
        .then( res => res.json())
        .then( nft => {
            item.push({
                "owner":it.sellerUsername,
                "name":nft.name,
                "desc":nft.description,
                "price":it.askingPrice,
                "source":nft.image
            })
        });
      })};

This is the logic that I thought of but itā€™s not working

#6

you get CORS errors there? can you put a console.log(it.tokenuri) before that line to make sure you have the right value there?

#7 
          
{item.map(one => (
                <MarketCard 
                key={one.myId}
            name={one.name}
            description={one.desc}
            source={one.source}
            />
             ))}
              
         </div>
        </div>
       
    )
}

Iā€™m pushing everything to the Item array
Data is getting populated in the Item array
But itā€™s not displaying the results

I think itā€™s some logical error
Thereā€™s no compilation or syntax errors

#8

you also have no errors in your browser console?

#10

Nope, no errors. Itā€™s logical error I guess
Thatā€™s why Iā€™m asking for logic to list the items from the ItemsForSale table using react.

#11

You say that you have the right data in that console.log(item) but it doesnā€™t make it to the html part?

you could also try console.log(JSON.stringify(item)) if you get [object] there

#12

Yes.
Console.log(item) gives me the array of Items present in the table.

But itā€™s not displaying it on the card.

I think the issue is in React the JSX part gets rendered first and then these functions.
I tried putting this into useEffect hook but still facing the same problem.

The DOM should be unmounted and mounted again once the Item array is populated.

But idk how to implement that logic

#13

Could you try to use this instead of <MarketCard > :

{item.map((one) => (<>{one.name}</> ))}
#14

Itā€™ll be really cool if you share your repo :man_factory_worker:

#15
  1. You need to update moralis version.
  2. It doesnā€™t even call getItems cloud function from your code currently, so thatā€™s why itā€™s empty
#16

When I console.log(data) I can see all the objects from ItemsForSale table

1 Like