Routes returning result of .populate() but cannot be accessed in React FrontEnd

[Goro]

What stack are you using?

(ex: MERN(mongoose + react), DR(django + react), PEN, etc.)

MERN

What's the problem you're trying to solve?

I am trying to return any field value from my objectid reference in my Order Schema, ultimate to attach the "username" of a current User/Porter attached to the Order.

Post any code you think might be relevant (one fenced block per file)

order.js model

    porter: {
      type: mongoose.Schema.Types.ObjectId,
      ref: "User",
    },

order_route.js route

router.get('/owner/:ownerid', requireToken, (req,res,next) => {
	Order.find()
		.populate('porter', 'email')
		// .populate('owner')

Offending Line:

<Text fontSize='lg'>CURRENT STATUS: {orders.porter}</Text>

Console Log of Response to Fetch Request

porter:
> email: "[e-mail]"
> _id: "61d9f26d33238e1ed2b21e31"
> [[Prototype]]: Object

If you see an error message, post it here. If you don't, what unexpected behavior are you seeing?

react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {_id, email}). If you meant to render a collection of children, use an array instead.

What is your best guess as to the source of the problem?

I've JSONified my response but the object reference inside of my response is still an object.

What things have you already tried to solve the problem?

• I've tried to reduce the fields populated (duh!) Can't expose user info like that!

• I've tried to "unwrap" the object reference in the express route.

• I haven't tried to do a obj.key or obj.value "unwrapping" in in jsx.

• I may not have added a virtual method to the model to return this objectid ref in a specific format.

Pls advise.

[Timm Schoenborn]

Show the react code that's trying to show the porter's info, I suspect you're showing something like order.porter when it should be something like order.porter.email

[DoireannJane]

https://www.g2i.co/blog/understanding-the-objects-are-not-valid-as-a-react-child-error-in-react <---this might be helpful?

[Goro]

Show the react code that's trying to show the porter's info, I suspect you're showing something like order.porter when it should be something like order.porter.email

The offending line is in the issue I submitted.
I've tried variations of {orders.porter.email}, {orders.porter._id} just to see if I had access.
I've tried this and it doesn't work.

[Timm Schoenborn]

ah! somehow I didn't see that it was in there, my bad! so, something here:

<Text fontSize='lg'>CURRENT STATUS: {orders.porter}</Text>

that catches my eye, is that it says 'orders' plural .porter, is it meant to be representative of multiple orders? Is there a console log of the data you're getting back from the api call that you can share? I see the one that just has the porter, but I want to see what orders looks like.

[Goro]

Yeah after doing some group debugging, we discovered that the error was that not all "orders" had porters, and thus would trip. It appears it was working as intended but how to fix it was hard to discern. I'll have to write some logic to handle this.

This means, that populating did work as intended.

If possible, will I be able to get help with a more general question?

[Timm Schoenborn]

of course! glad y'all figured that out together! thanks for adding the solution