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
As your app grows, it's a good practice to "type check" or validate the data a component receives from props. In this video, you'll learn how to validate props with the PropTypes library. PropTypes not only help you catch and avoid bugs, but they also serve as documentation for components. Other developers working on the same project will know exactly which props your components take and what types they should be.
Adding PropTypes to your project
You can install prop-types by running
npm i prop-types.
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
Props play a huge role in React.
0:00
In the typical react data flow,
0:03
props are the only way that components
can interact with other components.
0:05
We've used props all throughout the
project to pass data down to components.
0:10
If a component expects a certain prop,
0:16
what would happen if we forget
to pass a prop to the component?
0:18
In some cases, nothing.
0:22
For example, we're passing the Header,
a string via the title prop.
0:25
If we forget to pass it in,
we'd get an empty header.
0:29
The same will happen if we
somehow forgot to pass a name or
0:34
a score prop to the player component.
0:37
React doesn't output any errors or
warning, so
0:40
we're left having to figure out
why parts of our app are blank.
0:43
We usually pass different types of data,
like numbers, strings,
0:47
arrays, and functions,
as a prop to a component.
0:51
As your app grows, it's good practice
to type check or validate the data
0:55
a component receives from props to make
sure that it's the right type of data.
1:00
Typechecking can help you catch
a lot of bugs during development.
1:05
There are three popular ways to
handle type checking in React,
1:10
PropTypes, TypeScript, and Flow.
1:16
You can read about TypeScript and
Flow in the teachers notes.
1:20
In this video, I'll teach you how to
validate props with the PropTypes library.
1:24
PropTypes used to be built into React.
1:29
It was moved into a separate package
because typechecking is optional and
1:32
to give developers the option of
using other tools and approaches.
1:37
To begin using PropTypes in our app,
we'll need to install and
1:41
import the PropTypes library.
1:46
Open up your terminal or console,
1:48
stop running the development
server by pressing Ctrl+C,
1:51
and run npm install -- save prop-types.
1:57
Once it's installed, run npm start to
start to start up the development server.
2:01
Let's start by validating
the Counter component's props.
2:08
In the file Counter.js,
I'll need to import PropTypes at
2:11
the top with import
PropTypes from prop-types.
2:16
To run typechecking on a prop for
2:22
a component,
you assign it the PropTypes property.
2:25
To use PropTypes on a function component,
like Counter,
2:28
write Counter.propTypes right below the
function and set it equal to an object.
2:33
The propTypes object contains the props
being passed to the component as its keys.
2:39
The Counter component accepts three props,
ID, score, and change score.
2:45
Inside the object, add the properties id,
score, and changeScore.
2:50
PropTypes come with a range of validators
you can use to make sure that the data
2:57
coming in from props is valid.
3:01
For example, to check that the id and
score props are number types,
3:04
write PropTypes.number as the value.
3:10
And to declare that the changeScore prop
is a function type, write PropTypes.func.
3:14
The React docs have a list of type
validators you can use with helpful
3:21
examples.2 You'll find a link to this page
in the teachers notes with this video.
3:25
For example, use PropTypes that
bool to validate booleans,
3:31
PropTypes.string for strings, and so on.
3:35
PropTypes provide helpful warnings at
runtime if the prop is different from
3:40
the one defined in the PropTypes object.
3:44
For example, if I accidentally pass
Counter a score prop that's a string
3:48
instead of a number, in the console we see
the message, warning, failed prop type.
3:53
Invalid prop score of type string
supplied to Counter, expected number, so
3:58
that's really helpful.
4:03
All right, let's validate
the Header component's props next.
4:06
In Header.js, let's import PropTypes.
4:09
I like to import any libraries
above the component imports.
4:14
So right below the React import,
add import PropTypes from prop-types.
4:17
Next, below the function,
Create the PropTypes
4:25
object with Header.propTypes = {}.
4:30
The PropType the Header component
accepts should be a string.
4:34
So let's write title and
set it to PropTypes.string.
4:39
And the players props is an array
containing all the players objects in
4:45
state.
4:50
So we can simply validate that it's
an array with PropTypes.array.
4:50
But arrays can contain numbers, strings,
booleans, and in our case, objects.
4:56
So to make sure that the array
is an array of objects,
5:03
we can use the arrayOf method on
PropTypes and pass it PropTypes.object.
5:08
Next the Stat component receives
the players array via props.
5:14
With that data, we determine the total
number of players and the total score.
5:19
In Stats.js,
let's first import PropTypes at the top,
5:25
And define our PropTypes below
the function with Stats.propTypes and
5:33
set it equal to an object.
5:38
Just like in the Header component,
5:44
we should validate that the players
props is an array of objects
5:47
using PropTypes.arrayOf and
passing it PropTypes.object.
5:52
But we can be even more
specific by specifying
5:57
the properties of the object
with the shape method.
6:01
We have some resources regarding the shape
method in the teachers notes below.
6:05
I'll replace objects with shape,
which takes in an object.
6:10
The most important property to validate
here in the Stats component is
6:14
the score prop,
which we use to determine the total score.
6:18
To check that the score prop is
a number type, write PropTypes.number.
6:23
Let's go over what we just wrote.
6:29
We're checking if the players
prop that's being passed to
6:32
the Stats component Is
an array containing objects.
6:36
But more specifically,
6:40
we're checking if the objects in the array
have a score property that's a number.
6:41
Again, this is not required, but
6:48
I do recommend taking the time to
write detailed PropTypes like this.
6:50
Because if you somehow pass
bad data to a component,
6:54
React will warn you about it,
which makes for much easier debugging.
6:58
And for performance reasons, PropTypes
is only checked in development mode.
7:03
Challenge yourself by adding PropTypes to
the rest of the components in our app.
7:08
You can see my solution in
the project files below.
7:13
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