Preview
Video Player
00:00
00:00
Building the Statistics Component
7:06We 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.
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