Learn to use propTypes to validate props and provide documentation.

PropTypes

In this lesson, you will learn to use an important React feature called `propTypes`.

`propTypes` are useful for two reasons.  The first reason is *prop validation*.

*Validation* can ensure that your `props` are doing what they're supposed to be doing.  If `props` are missing, or if they're present but they aren't what you're expecting, then a warning will print in the console.

This is useful, but reason #2 is arguably more useful: *documentation*.

*Documenting* `props` makes it easier to glance at a file and quickly understand the component class inside.  When you have a lot of files, and you will, this can be a huge benefit.

Click Next to learn how to use `propTypes`!

propTypes

Remember *function components?*  You can see some familiar ones in **Example.js**.
 
How could you write `propTypes` for a function component?

```js
// Usual way:
class Example extends React.component{

}

Example.propTypes = {

};
...

// Function component way:
const Example = (props) => {
  // ummm ??????
}
```  

It turns out the process is fairly similar. To write `propTypes` for a function component, you define a `propTypes` object as a property of *the function component itself.*  Here's what that looks like:
```js
const Example = (props) => {
  return <h1>{props.message}</h1>;
}

Example.propTypes = {
  message: PropTypes.string.isRequired
};
```

PropTypes in Function Components

In the code editor, look at the property on `MessageDisplayer`'s `propTypes` object:
```js
message: PropTypes.string 
```
What are the properties on `propTypes` supposed to *be*, exactly?

The *name* of each property in `propTypes` should be the name of an expected `prop`. In our case, `MessageDisplayer` expects a `prop` named `message`, so our property's *name* is `message`.
 
The *value* of each property in `propTypes` should fit this pattern:
```js
PropTypes.expected_data_type_goes_here
```
Since `message` is presumably going to be a string, we chose `PropTypes.string`. You can see this on line 13. Notice the difference in capitalization between the `propTypes` object and `PropTypes`!

Each property on the `propTypes` object is called a `propType`.

Select the next file in the code editor, **Runner.js**.  Find `Runner`'s `propTypes` object.

`Runner` has six `propTypes`!  Look at each one.  Note that `bool` and `func` are abbreviated, but all other data types are spelled normally.

If you add `.isRequired` to a `propType`, then you will get a console warning if that `prop` *isn't* sent.

Try to find all six `prop`s from the `propTypes` object in `Runner`'s render function:  `this.props.message`, `this.props.style`, etc. 

Add Properties to PropTypes

In the code editor, take a look at `MessageDisplayer`'s render function.

Notice the expression `this.props.message`.  From this expression, you can deduce that `MessageDisplayer` expects to get passed a `prop` named `message`.  Somewhere, at some time, this code is expected to execute:
```js
<MessageDisplayer message="something" />
```
If a component class expects a `prop`, then you can use `propTypes` for that component class!

In order to start using `propTypes`, we need to import the `'prop-types'` library. 

```js
import PropTypes from 'prop-types';
```

Then, you can declare `propTypes` as a static property for your component after the component has been defined. See the example of a `propTypes` property on lines 11-13.  Notice that the *value* of `propTypes` is an object, not a function!

The second step is to add properties to the `propTypes` object.  For each `prop` that your component class expects to receive, there can be one property on your `propTypes` object.

`MessageDisplayer` only expects one `prop`:  `message`.  Therefore, its `propTypes` object only has one property. 