× [React-Moralis] Error: Objects are not valid as a React child

Moralis General
#1

I am getting an error when trying to fetch data from the Moralis database as a cloud function and parse it as a JSON file and displaying it in my component:

import { useMoralis, useMoralisFile, useNewMoralisObject, useMoralisCloudFunction} from "react-moralis"
import {useState, useRef, useEffect} from 'react';
import Item from "./Item"
import { Button } from "@chakra-ui/button";

export const UserItems = () => {

    const {data, error, isLoading} = useMoralisCloudFunction("getUserItems")
    
    const list = JSON.parse(JSON.stringify(data))

    return (
        <>
        {list}
        </>
    )

}

This is the specific error I am getting:

Error: Objects are not valid as a React child (found: object with keys {tokenObjectId, tokenId, tokenAddress, symbol, tokenUri}). If you meant to render a collection of children, use an array instead.

EDIT:

Even when i try to destructure it it gives me an error: [Uncaught Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development]

1 Like
#2

Can you post the data structure over here for more reference. Either a screenshot from the console logs in chrome or you could post the JSON here. [before formatting using stringify]

Looking forward to your response.

#3

I’m following the Rarible-Clone YT tutorial and am trying to refactor the code from Vanilla JS to React.

The JSON structure is the same as on the video:

[{"tokenAddress":"0x0000000000", "tokenUri:"https://ipfs/xxxxxxxx"}]

The Token Uri is the object I need to display as it contains the metadata about the NFT’s name, description and image.

This is what I came up with, but am unable to get the fetched JSON call items in an array

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()
             
            source.push(tokenInfo)
              
            } catch (err) {  
              throw err  
            }  
        })()
    }

    let result = []
    for(var i = 0; i < source.length; i++) {
        var ob = source[i];
        result.push(ob)
        }
    
    console.log(source)
    return (
        <>
        {
            result.map((item) => (
                item.name
            ))
        }

        </>
    )
}
1 Like
#4

It seems that the JSON object can not read inside JSX. Normally you have to iterate the object.

Here is what I normally do.

import {useMoralisQuery} from "react-moralis";

function Test() {

    const { data, error, isLoading } = useMoralisQuery("Auctions");

    if (error) {
        return <span>🤯</span>;
    }

    if (isLoading) {
        return <span>🙄</span>;
    }

    return (
        <>
            {Object.keys(data).length > 0 &&
            data.map((item, index) => (
                <div>{item.id}</div>
            ))}
        </>
    )
}

export default Test

I notice Moralis new version we have to change it into

  {Object.keys(data).length > 0 &&
     data.map((item, index) => (
     <div>{item.id}</div>
  ))}

// to this

  {data &&
     data.map((item, index) => (
     <div>{item.id}</div>
  ))}
1 Like
#5

Thanks for the reply and code, I understood that part, but now I am facing issues with one of the items of the JSON as it contains a url that points to another JSON which I have to fetch within the loop and then store somewhere to then later display as JSX.

#6

Would you need this particular thread of the forum to help you with that issue or shall we create a new one?

One thread per issue is what we’d like to maintain on our forums. Do let us know.

#7

yes that sounds like a good idea, ill start a new thread thank you