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