This course will be retired on March 31, 2024. We recommend "React Basics" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn how to iterate over data and render elements in React.
Player objects
{
name: "Guil",
score: 50
},
{
name: "Treasure",
score: 85
},
{
name: "Ashley",
score: 95
},
{
name: "James",
score: 80
}
Resources
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We need to improve how
players are used in the app.
0:00
We currently have four hard-coded Player
components inside the App component.
0:03
Now, if you've built a JavaScript
application in the past,
0:08
you may have looped through an array, and
used the returned information to build
0:11
strings of HTML elements that
you insert into the DOM.
0:15
Ideally in our app,
we would have an array of players and
0:18
render a Player component for
each player in the array.
0:22
In this video, we'll do just that.
0:26
I'll teach you how to iterate over data to
produce a list of elements, in this case,
0:28
Player tags.
0:33
First, let's define our players array.
0:34
We'll write it at the top of app.js for
now.
0:37
Create a variable named players.
0:40
It will be an array of objects, each
object with a name and score property.
0:44
I'll paste four objects into the array.
0:49
And you can copy these from
the teacher's notes with this video.
0:51
So now to get this players
data into our application,
0:54
I need to pass the players array as
props to the main App component.
0:57
So down in the ReactDOM.render method,
1:02
I'll add a prop named
initialPlayers to the App tag.
1:06
Then I'll pass it the players array,
1:12
by writing the variable
players between curly braces.
1:15
If I bring up React Dev Tools and
select the App component,
1:19
you can see that it's now taking
in an initialPlayers prop, and
1:22
its value is an array containing
the four Player objects.
1:26
So next, to use these props
inside the App function,
1:30
we need to pass it the parameter for
props.
1:34
Now, inside the App component,
we have access to props.initialPlayers.
1:39
So what we wanna do is
iterate over this array, and
1:44
return a Player component for
each object in the array.
1:47
For this, I'm going to use the map
iteration method on the array.
1:51
If you're not sure how to use map,
1:55
be sure to watch the Treehouse videos
posted in the teacher's notes.
1:56
You'll likely use map Map quite
a bit in React to loop over data.
1:59
Now remember, every JavaScript
expression written inside JSX
2:03
needs to be placed inside curly braces.
2:07
So below the Players list comment,
I'll add curly braces, so
2:10
that the JSX is able to
evaluate the map function.
2:14
Then I'll begin to map over the Players
array by typing props.initialPlayers.map.
2:18
Map takes a callback function that
receives and processes each item in
2:24
the array, one by one, and returns
a new array of the processed items.
2:29
So what we wanna do is map each of our
Player objects to a Player component.
2:33
I'll write the callback as
an arrow function that takes
2:40
the parameter player to represent the
current item being processed in the array.
2:43
And the function will return
a Player component, so I'll simply
2:47
copy one of the Player components and
paste it inside the callback.
2:52
I'm using an implicit return here,
2:57
which means that I'm omitting
the return keyword and curly braces.
2:59
Next, we'll need to adjust
the props being passed to Player.
3:05
Instead of passing static values,
3:09
change the name prop's
value to player.name,
3:13
and the score prop's
value to player.score.
3:18
These are the name and
3:23
score properties from each player
item we're getting from map.
3:24
Now we can delete the rest of
the Player tags below the expression,
3:29
give app.js a save.
3:33
And over in the browser, we see the four
players rendered to the screen.
3:35
And if you have a look at
the app in React Dev Tools,
3:39
you'll see four Player components,
each with a different name and score prop.
3:42
And over in the Elements pane,
you'll see React rendered
3:46
four divs with the class
player to the DOM, great.
3:51
The header component still displays
1 as the number of total players.
3:56
Well, this is a quick fix.
4:00
We know that we're getting
an array from props.
4:02
So in the Header tag,
if I use the length property on
4:05
props.initialPlayers, that should return
the number of Player objects in the array.
4:09
Now it displays 4 players.
4:17
Good, that was pretty quick and simple.
4:18
Finally, in the console,
React gives a warning.
4:21
It says Warning, Each child in an array or
iterator should have a unique key prop.
4:25
While this doesn't prevent
our app from running,
4:31
it is something we should address and fix.
4:33
So in the next video, we'll dive into why
this warning exists and how to resolve it.
4:36
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up