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.
CodePudding user response:
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>
CodePudding user response:
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...