Access and Display Nested Array on Screen React Native

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?

hb22 · Accepted Answer · 2018-08-29 08:11:22Z

3

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>

edited Aug 29, 2018 at 8:11

hb22

3831 gold badge2 silver badges15 bronze badges

answered Aug 27, 2018 at 1:43

Chris Cousins

1,92211 silver badges15 bronze badges

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

3 Comments

hb22 Over a year ago

I am having an issue with using return(); within the map function. [ Error: unexpected token, expected , ]. This is not a problem when I use single line "return … "

Chris Cousins Over a year ago

My bad, the returned jsx needs a single parent element, edited answer to add top level div.

hb22 Over a year ago

I was able to get it working by replacing <div> with <View>. I also shifted ' key={key} ' from the <Text> component to the <View> component to resolve a warning that was previously appearing. Appreciating that your answer seems to be the ReactJS equivalent to the solution, I have marked it as the accepted answer. Thanks!

Collectives™ on Stack Overflow

Access and Display Nested Array on Screen React Native

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related