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