Error: Objects are not valid as a React child (found: object with keys {title, description, photo})

Hey guys,
So I am running into an issue. I am attempting to extract a Object, from an array column, in an Object Table on the Database. I have run the cloud function as it is intended, and have done so with other attributes. I cannot seem to figure it out. This is my cloud function.

Moralis.Cloud.define(“getTokens”, async () => {
const query = new Moralis.Query(“Tokens”);
query.equalTo(“token”);
const count = await query.count();
query.limit(count);
const results = await query.find();
let sum = [];
for (let i = 0; i < results.length; ++i) {
await sum.push({
“Name”: results[i].get(“Name”),
“Symbol”: results[i].get(“Symbol”),
“Address”: results[i].get(“Address”),
“Logo”: results[i].get(“Logo”),
“Type”: results[i].get(“Type”),
“LastPrice”: results[i].get(“LastPrice”),
“objectId”: results[i].get(“objectId”),
“Chain”: results[i].get(“Chain”),
“Pool”: results[i].get(“Pool”),
“Description”: results[i].get(“Description”),
“Website”: results[i].get(“Website”),
“ProfilePic”: results[i].get(“ProfilePic”),
“Pictures”: results[i].get(“Pictures”),
“Video”: results[i].get(“Video”),
“Announcements”: Object.keys(results[i].get(“Announcements”)).map((announcement) => { title: announcement.title, description: announcement.description},
});
}
return sum;
});

All work except Announcements. I have tried mapping it a dozens of different ways, and even wrote a for loop inside the existing for loop multiple ways. How can I return the objects inside the array? Also, if there is a more server side efficient way to do this that would be appreciated as well.

How are you trying to render the object? For the error, you can just access or render the properties like:

<h1>{annoucementsObj.title}</h1>

I’m just trying to log it in the console, and it’s saying I need to further destruct it. If I try mapping it or a for loop inside, sometimes I get the same error or getTokens is an invalid function. I can remove it from the cloud function and call it in my dapp but I’d prefer to run it with cloud functions. There’s another post that’s similar to what I’m trying to do, with same title, but much different. I have checked on mongodb and even firebase cloud functions to try and figure it out, but no luck.

It’s a server side error.

Objects are not valid as a React child You can post this React/component code.

I’m just trying to log it in the console, and it’s saying I need to further destruct it.

Can you post all your code involving using the cloud function and any errors.

That’s error but besides that I’m just printing it in the console. Right now I just have it as “Announcements”: results[i].get(“Announcements”) as my cloud function. Sometimes I get it to print to console, but without Announcements.

Oh it’s printing to console now but still recieving error, but I’m not rendering it in my app?

Let me rephrase that… I’m not attempting to render it, but it’s throwing up the error and not loading the page. I’ll play around with it more and post my answer if you don’t know what I’m saying. Really bad with terminology because I’m self taught.

You were/are trying to render an object with title, description, photo keys (looks like it is annoucements based on that variable log), that’s why you’re getting that error, it’s not random.

Looks like things aren’t loading due to the uncaught error from updateToken is undefined. Catch or fix that first.

Yeah man your right. Feel super dumb. I didn’t realize I typed tokenMetaData?.Announcements the day before before I even had any announcements in dB. Thanks for your help.