Props play a huge role in React.

In the typical React dataflow,

props are the only way that components can interact with other components.

We've used props all throughout the project to pass data down to components.

If a component expects a certain prop,

what would happen if we forgot to pass the prop to the component?

In some cases, nothing.

For example, we're passing the header, a string, via the title prop.

If we forgot to pass it in, we'd have an empty header.

The same would happen if we somehow forgot to pass a name or

a score prop to the player component.

React doesn't output any errors or warnings, so

we're left having to figure out why parts of our app are blank.

We usually pass different types of data, like numbers, strings, arrays, and

functions as pops to components.

As your app grows, it's a good practice to type check or validate the data

a component receives from props, to make sure that it's the right type of data.

Type checking can help you catch a lot of bugs during development.

There are three popular ways to handle type checking in React, Prop Types,

TypeScript, and Flow.

You can read about TypeScript and Flow in the teacher's notes.

In this video, I'll teach you how to validate props with the PropTypes library.

PropTypes used to be built into React.

It was moved into a separate package, because type checking is optional, and

to give developers the option of using other tools and approaches.

To begin using PropTypes in our app, we need to install and

import the PropTypes library.

Open up your terminal or console.

Stop running the development server by pressing Ctrl+C,

and run npm install --save prop-types.

Once it's installed, run npm start to start up the development server.

Let's start by validating the counter components props.

In the file, Counter.js, I'll first need to import PropTypes

at the top with import PropTypes from 'prop-types';.

To run type checking on the props for a component,

you assign it the PropTypes property.

To use prop types on a function component like Counter, write Counter.propTypes,

right below the function, and set it equal to an object.

The propTypes object contains the props being passed to the component as its keys.

The Counter component accepts three props, index, score, and changeScore.

So inside object, add the properties index,

score, and changeScore.

PropTypes come with a range of validators you can use to make sure that the data

coming in from props is valid.

For example, to check that the index and score props are a number type,

write PropTypes.number as the value.

And to declare that the changeScore prop is a function type, write PropTypes.func.

The React docs has a list of all the type validators you can use with helpful

examples.

You'll find the link to this page in the teachers notes with this video.

For example, you use PropTypes.bool to validate booleans,

PropTypes.strings for strings, .object for objects, and so on.

PropTypes provide helpful warnings at runtime if the type other prop

is different from the one defined in the PropTypes object.

For example, if I accidentally pass Counter a score prop that's

a string instead of a number, in the console, we see the message.

Warning: Failed prop type: Invalid prop 'score' of type 'string' supplied to

'Counter', expected 'number'., so that's really helpful.

All right, let's validate the header component's props next.

In Header.js, let's import prop types.

I like to import any libraries above the component imports.

So right below the react import at import PropTypes from 'prop-types'.

Next, below the function, create the propTypes object with Header.propTypes.

The title prop the header accepts should be a string.

So let's write title, and set it to PropTypes.string.

And the players prop is an array containing all the player objects in

state.

We could simply validate that it's an array with PropTypes.array, but

arrays can contain numbers, strings, booleans, and in our case, objects.

So to make sure that the array is an array of objects, we can use the arrayOf

methods on PropTypes and pass it PropTypes.object.

Next, the stats component receives the players array via props, and

with that data, we determine the total players and total points.

So in Stats.js, let's first import PropTypes at the top,

and define our PropTypes below the function with

Stats.propTypes, and set it equal to an object.

Just like in the header component,

we should validate that the players prop is an array of objects

using PropTypes.arrayOf and passing it PropTypes.object.

But we can even be more specific by specifying the properties of

the object with the shape method.

I'll replace object with shape, which takes an object.

And the most important property to validate here in the Stats component is

the score prop, which we use to determine the total points.

To check that the scope prop is a number type, write PropTypes.number.

Again, this is not required,

but I do recommend taking the time to write detailed PropTypes like this.

Because if you somehow pass bad data to a component, React will warn you about it,

which makes for much easier debugging.

And for performance reasons, PropTypes is only checked in development mode.