Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React Components!
You have completed React Components!
Preview
Let's go over one solution to the React challenge.
SVG crown icon
<svg viewBox="0 0 44 35">
<path d="M26.7616 10.6207L21.8192 0L16.9973 10.5603C15.3699 14.1207 10.9096 15.2672 7.77534 12.9741L0 7.24138L6.56986 28.8448H37.0685L43.5781 7.72414L35.7425 13.0948C32.6685 15.2672 28.3288 14.0603 26.7616 10.6207Z" transform="translate(0 0.301727)"/>
<rect width="30.4986" height="3.07759" transform="translate(6.56987 31.5603)"/>
</svg>
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
How did it go?
0:00
Were you able to build
the highest score feature?
0:01
Don't worry if you didn't
complete everything.
0:04
You can watch my solution,
compare it to what you wrote and
0:07
then try to recreate it yourself.
0:10
First, let's create a new
file named icon.js.
0:14
We'll import react,
at the top of the file, and
0:19
create a function component named Icon.
0:22
Our component will render the SVG element,
0:25
that was provided in
the teachers notes below.
0:28
And at the bottom,
we'll export our component.
0:32
To apply the gold fill color and
scaling animation to the crown,
0:36
we need to add the class is-high-score
to the SVG element, but
0:41
we only want to add it if
the player has the highest score.
0:46
So eventually Icon will accept
the prop named isHighScore.
0:52
That will equal true if the player has the
highest score, and false if it does not.
0:57
Let's pass className a ternary expression
to render the class is-high-score,
1:04
if isHighScores is true,
otherwise render null or no class attribute.
1:11
Let's not forget to validate
the Icon component's props.
1:18
Let's import Prop Types, at the top
with import PropTypes, from prop-types.
1:23
And right below the function,
let's give Icon the property propTypes.
1:30
And set it equal to an object.
The isHighScore prop,
1:35
the Icon accepts should be a boolean.
1:39
So I'll write, isHighScore: and
set it to PropTypes.bool,
1:43
and let's make it required
by adding .isRequired.
1:49
Our Icon component is complete.
1:54
In Player.js I'll import
the Icon component with
1:57
import Icon from dot slash Icon.
2:02
Then display the icon component
in the player components
2:05
JSX right below the remove
player button. Player component
2:10
will also accept the isHighScore
prop to pass down to
2:16
the Icon component with
isHighScore = isHighScore.
2:21
Also, let's not forget to add
the isHighScore prop to the bottom
2:26
of the Player.propTypes object and
set it to PropTypes.Bool and
2:31
make it required by
adding .isRequired.
2:37
Awesome, the crown icons are displaying.
2:42
Now we're going to get started
on the highest score feature.
2:45
So let's think about this.
2:49
We need to know what's the highest
score out of all the players.
2:51
To do that, we'll need to look
through the player's array and
2:55
store the highest score somehow
either as a ref or state.
2:59
And we want to do this every time
the score changes to make sure we have
3:04
the latest highest score.
3:09
So as you might remember, we actually
learned about a tool that will help us do
3:11
this and that's react useEffect hook.
3:16
Under the previous player ID ref.
3:19
Let's write out our useEffect hook and
pass it an arrow function.
3:22
First, we'll create an array that
stores all the player scores by
3:27
calling the map method
on the player state.
3:32
For each player we want map
to return the player's score.
3:36
So let's write player
=> player.score.
3:40
We can use the Math.max function
to return the largest score value,
3:46
but how should we store that?
3:51
As a ref or as a state?
3:54
We know useEffect will run our side
effect after the component renders.
3:56
If the high score value changes,
4:03
we want to trigger another render
to update the crown icon.
4:06
As you might remember, one of the
differences between the useRef hook and
4:11
the useState hook is that useState
causes a re-render while useRef does not.
4:16
Under the player state, we'll use
the useState hook to create a state
4:24
called highScore and the function
to update it as setHighScore.
4:29
Back in our useEffect hook,
we'll set the highScore state
4:36
to the max score by passing
setHighScore Math.max and
4:41
pass it all the scores
using the spread operator.
4:46
The way the code is written
now react will run our side
4:51
effect function after every single render.
4:55
However, we only need it to run
when the player score is updated.
4:59
So let's add a dependency array as
a second argument to the useEffect hook.
5:05
So that only when the player state
changes will the side effect run.
5:11
Let's check if our useEffect
hook is working properly.
5:16
When we increase a player score,
5:20
we can see in React dev tools
the highScore state updates.
5:23
Our icon component needs to receive
the isHighScore prop that will be
5:27
true if the player has the highest score,
and false if it doesn't.
5:32
So in the file App.js, I'll scroll down,
to the Player component.
5:38
The Player component will receive
a Boolean prop to determine whether or
5:43
not to display the gold crown.
5:49
In the map function, pass the player
component a prop named isHighScore.
5:53
I'll pass isHighScore a conditional that
5:59
checks if the player's score
equals the highScores state.
6:02
The challenge instructions also states
that when the highest score is 0,
6:07
all icons should be light gray.
6:11
So I'll also add that check by adding and
highScore does not equal zero.
6:14
We're almost done,
we just need to update the memo
6:21
comparison function in the file Player.js.
6:26
Right now the player component only
re-renders if there's a change to
6:30
the player score prop.
6:35
We need it to re-render when the is
high score prop changes as well.
6:37
So let's add to the return statement.
6:42
And prevProps.isHighScore
= nextProps.isHighScore.
6:45
Let's see if our highest
score features working.
6:52
I'll add a score to Guil and the crown
has changed from light gray to yellow.
6:58
Great.
There's likely many ways you can implement
7:04
the highest score feature.
7:07
I encourage you to experiment
with different approaches, and
7:10
don't forget to share your solutions
with the Treehouse community.
7:14
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