Access and Display Nested Array on Screen React Native

I have an array of Athletes objects that contain another array of teams objects that particular athlete has played for:

Athletes

teams

var athletes = [

"athlete_id": 123,
"first_name": "john",
"last_name": "doe",
"teams": [
"team_id": 4,"team_name": "Eagles" ,
"team_id": 7, "team_name": "Knights"
]
,

"athlete_id": 276,
"first_name": "jane",
"last_name": "doe",
"teams": [
"team_id": 4,"team_name": "Pilots" ,
"team_id": 7, "team_name": "Thunder"
]

];


I want to, very simply, render the items in this format (teams listed under full name):

John Doe

Eagles

Knights

Jane Doe

Pilots

Thunder

I have tried the following in the render()method:

render()

<View>
athletes.map((item, key) =>
return <Text key=key>item.first_name + " " + item.last_name</Text>
item.teams.map((unit, key2) =>
return <Text key=key2>unit.team_name</Text>
)

)
</View>


With the above snippet of code, I have only been able to render the full names of both athletes, and not their teams. What can I do to achieve the proper output?

athletes

1 Answer
1

It is because you are returning the item with the first name, last name in it, before your code has chance to return any of the team data:

<View>
athletes.map((item, key) =>
return (
<View key=key>
<Text>item.first_name item.last_name</Text>
item.teams.map((unit, key2) =>
return <Text key=key2>unit.team_name</Text>
)
</View>
);
)
</View>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.