---
# System prepended metadata

title: 'Lesson3-7: State Management: PropTypes'
tags: [Recat]

---

# Lesson3-7: State Management: PropTypes
###### tags: `Recat`
# Type checking a Component's Props with PropTypes
As we implement additional features into our app, we may soon find ourselves debugging our components more frequently. For example, what if the props that we pass to our components end up being an unintended data type (e.g. an object instead of an array)? PropTypes is a package that lets us define the data type we want to see right from the get-go and warn us during development if the prop that's passed to the component doesn't match what is expected.

To use PropTypes in our app, we need to install [prop-types](https://facebook.github.io/react/docs/typechecking-with-proptypes.html):

```
npm install --save prop-types
```
Alternatively, if you have been using yarn to manage packages, feel free to use it as well to install:
```
yarn add prop-types
```
Let's jump right in and see how it's used!
{%youtube 9ngd5sfC4rw%}
[Here's the commit with the changes made in this video.](https://github.com/udacity/reactnd-contacts-app/commit/094067a5439f80481e1dd66af0468ebf41f0fc62)

![](https://i.imgur.com/Ar78ktT.png)

# PropTypes Recap
All in all, PropTypes is a great way to validate intended data types in our React app. Type checking our data with PropTypes helps us identify these bugs during development to ensure a smooth experience for our app's users.

# Further Research
- [prop-types](https://www.npmjs.com/package/prop-types) library from npm
- [Typechecking With Proptypes](https://facebook.github.io/react/docs/typechecking-with-proptypes.html) from the React Docs
