Objects are not valid as a React child (again)

Question

I know there is a bunch of the same questions but I really don't understand how to approach this differently than this. I really need an array of objects to be inside a map, I made an array to map it but need to find different info to show so I made a find on array of objects inside the map. How else I can do this other than with objects?!?

I have an array :

itemInfoObjTemp = ["lst_price", "qty_available", "qty_availible_diff"]

and I have an array of objects:

itemInfoObjTemp2 = Array [ Object { "field_description": "Javna cijena", "id": 2089, "name": "lst_price", }, Object { "field_description": "Fizička zaliha", "id": 3774, "name": "qty_available", }, Object { "field_description": "Reserved Qty", "id": 10970, "name": "qty_availible_diff", }, ]

and I'm trying to show the field_description as label, but I'm getting:

Objects are not valid as a React child (found: object with keys {id, field_description, name}). If you meant to render a collection of children, use an array instead.

 {itemInfoObjTemp.map((item, index) => ( <Text key={index}> <Text style={{ fontWeight: 'bold' }}> {itemInfoObjTemp2.find(item2 => item2.name === item ? item2.field_description : item )} : </Text>{' '} {itemInfoObj[item].toString()} </Text> ))}

all this info is dynamic from API, including object properites, so no hardcoding is possible.

In an example such as: someArray.find(someFn), the someFn is a function that is expected to return a boolean for each element of the 'someArray` array. The .find will return the someArray element which first matches the criteria set by someFn function. It returns the actual element as-is. So, if the element is an object, then .find returns an object. — jsN00b
– jsN00b, Commented Mar 21, 2022 at 16:47

Willey Ohana · Accepted Answer · 2022-03-21 16:48:00Z

1

Check out the find() docs here.

They state that it "returns the first element in the provided array that satisfies the provided testing function". This means when you call find(), you're receiving an Object back.

Instead, try out something like:

<Text style={{ fontWeight: 'bold' }}> {itemInfoObjTemp2.find(item2 => item2.name === item)?.field_description} </Text>

edited Mar 21, 2022 at 16:48

answered Mar 21, 2022 at 16:40

Willey Ohana

4221 gold badge4 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ikiK Over a year ago

I feel ashamed... I just needed: itemInfoObjTemp2.find( item2 => item2.name === item).field_description it is one of those days...

Willey Ohana Over a year ago

No shame at all. We all forget how JavaScript works sometimes :) I'd suggest adding the optional chaining on the returned object. In your original code, it looked like you weren't sure that there was always going to be an object returned. If there is not an object returned, you'll get an error trying to access .field_description on undefined. Optional chaining will fix that error.

ikiK · Accepted Answer · 2022-03-21 16:41:07Z

0

So I solved it with index:

 {itemInfoObjTemp.map((item, index) => ( <Text key={index}> <Text style={{ fontWeight: 'bold' }}> {itemInfoObjTemp2[index].field_description}: </Text>{' '} {itemInfoObj[item].toString()} </Text> ))}

But this is ridiculous. This will only work if arrays are of the same length and in the right order. In my case they by luck will always, but I really should have other safer options...

answered Mar 21, 2022 at 16:41

ikiK

6,5105 gold badges25 silver badges48 bronze badges

5 Comments

Willey Ohana Over a year ago

You don't need to directly access the index. Your code was almost correct, just using the incorrect Array function.

Dave Newton Over a year ago

How is it ridiculous? The original code didn't use find correctly, and you're reaching directly into an array of objects. It's also not clear that this is actually works as intended--index is sequential, if the array of objects is ordered differently than the array of strings seems like this'd be broken.

ikiK Over a year ago

@DaveNewton They are not ordered differently. I made a mistake when creating a question, made it manually not copied... IM gonna crawl back to my hole now...

Dave Newton Over a year ago

(If it's ordered the same then what do you need find for at all?) I'm two holes over if you need anything else ;) Safer in the holes.

ikiK Over a year ago

@DaveNewton Just in case they won't be, like I say it's all API dynamic data, only thing is certain, is that info will be there in both. So find is better then index. Thanks for the help!

Collectives™ on Stack Overflow

Objects are not valid as a React child (again)

2 Answers 2

2 Comments

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Related