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