"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
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