Access and Display Nested Array on Screen React Native - arrays

Question

I have an array of Athletes objects that contain another array of teams objects that particular athlete has played for:
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:
<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?

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>