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
We lifted the score state up to the top of the application. Now we can pass that state down to any component. We'll build a statistics component that displays the total number of players on the Scoreboard, as well as the total number of points.
Table snippet
<table className="stats">
<tbody>
<tr>
<td>Players:</td>
<td>0</td>
</tr>
<tr>
<td>Total Points:</td>
<td>0</td>
</tr>
</tbody>
</table>
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
In this video, we'll build a Stat
component that displays the total
0:00
number of players on the scoreboard,
as well as the total number of points.
0:05
We'll use the player state to determine
the number of player objects in state and
0:11
the player.score state to
calculate the total score.
0:16
First, we'll create
a component named Stats.
0:21
In the component folder,
create a new file named Stats.js.
0:25
Let's import react at the top of the file
0:33
by writing import react from react.
0:39
Next, let's write the Stats
component as an arrow function that
0:46
takes props as a parameter.
0:51
We'll display the Stats
using a good old HTML table.
0:59
So let's add the return keyword and
parentheses to wrap our JSX.
1:04
And let's not forget to export our Stats
component at the bottom of the file.
1:12
So first we'll write export,
then default and
1:18
the name of our component, which is Stats.
1:22
To create a table that
will display our Stats,
1:29
I'll quickly paste in an HTML
snippet of the table element.
1:32
You can copy this exact code from
our teachers notes with this video.
1:38
The table element has a class of stats.
1:43
The first row displays the players, and
the second row displays the points.
1:46
Both are hard coded as zero for now.
1:53
Now let's save our new Stats.js file and
1:57
import our new stats component
into the header component.
2:01
In Header.js we'll import the Stats
component by writing import Stats from and
2:07
the location of where
our Stats.js file is.
2:15
We'll display the Stats component on
the left side of the title by including
2:20
the Stats tag as the first child of
the header element, just above the h1 tag.
2:26
Since the total player's number
is now inside the Stats component,
2:33
let's delete the span element we were
using to display the total players.
2:39
Next, we need to get data from
the player state down into
2:45
the Stats component to calculate
the total players and the total points.
2:50
You already know how to
do that using props.
2:58
The Header component contains
the Stats component.
3:01
So first Header will need to be
pass the player state in order
3:06
to pass the state down
to the Stats component.
3:11
In the App component let's
change the total players prop
3:14
that's being passed to
the Header component to players.
3:19
Then pass the entire player state
to the component with players.
3:23
Now we need to pass the player's
state to the Stats component.
3:30
In Header.js, I'll give the Stats
component the same prop name,
3:34
players, and pass in the player
state with props.players.
3:41
Our player data now flows from
the App component through
3:47
the Header component and
down into the Stats component.
3:51
Now in the Stats component we can create
the stats using plain JavaScript.
3:58
We already know how to get
the total number of players
4:03
in state with a .length property.
4:07
Above the return statement,
I'll add a variable named
4:12
totalPlayers and
assign it props.players.length.
4:17
Inside the table, we can include the total
players variable in a JSX expression.
4:22
Let's save this and
see how it looks in the browser.
4:32
Now we see it's rendering the number four,
perfect.
4:36
Finally, calculating the total
points is a little more complex.
4:40
To get the total number of points, we'll
need to iterate over each player in state.
4:46
We'll get each player score and
total up the scores to produce our value.
4:52
The best way to do this is
with the reduce method.
4:59
Reduce is useful when you want to end
up with a value other than an array,
5:03
like a number.
5:09
Let's create a new variable
named totalPoints.
5:10
We'll use the reduce method
on the players array that's
5:14
being passed in through props.
5:19
Assign the variable props.players.reduce.
5:21
The reduce method takes
a callback function that gets
5:28
executed on each element in the array.
5:32
Let's pass reduce an arrow function.
5:36
The callback takes two parameters,
5:43
an accumulator that adds
up the returned values and
5:46
the current item being
processed in the array.
5:51
For the accumulator I
want the total score, and
5:55
the current item will be a player.
5:59
We can set the initial value of
the accumulator as the second argument
6:04
to the reduce method.
6:09
I'll initialize the total to be 0.
6:12
For each player being processed, we'll
add their score to the total accumulator.
6:16
Inside the callback function,
let's return total plus player.score.
6:23
The value of total gets
passed to each iteration to
6:32
produce the final total value.
6:37
Now that we've calculated
the total points, let's include
6:41
the total points variable in
the table with a JSX expression.
6:46
Let's save our changes and test our code.
6:52
If I increase or
decrease a player's score,
6:55
the stats table automatically
updates with the latest data.
6:59
Great!
7:05
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