Validate Custom React Component Props with PropTypes
In this lesson, we'll learn how you can use the prop-types module to validate a custom React component's props. We will start by building out a Proptypes object that throws an error if the prop passed is not of the required type. Then, we will import the React team's prop-types module and look at some of the useful utilities it provides like isRequired. Function components define Proptypes off of a property while Class components define Proptypes off of a static method.
Instructor: [00:00] When other people start using your components, sometimes they'll make mistakes when passing props. For example, here we're passing the value of true for first name which we're expecting to be a string in our component. We're not passing a last name prop at all. What is being rendered is not what we'd expect.
[00:16] To use PropTypes on a function component like say hello here, we'll say sayhello.proptypes is an object. To validate the first name prop, we'll add a first name key to this object. The value of this is a function which accepts props, prop name, and component name.
[00:36] Let's go ahead and say, if type of props at prop name is not equal to string, then we'll return a new error, "Hey, you should pass a string for prop name in component name, but you passed a type of props at prop name." With that, we'll see our error message being logged to the console here. Awesome.
[01:00] We need the same thing for the last name, so we'll pull this function out to an object that we'll call PropTypes and put it in a property called string. Then, we can set first name to proptypes.string, and last name and set that to proptypes.string as well. Super. Now, we're getting the error message for both of them.
[01:20] Because this and other PropTypes are so common, the react team has built a package called PropTypes which we can use just like the one we just built ourselves. I'll go ahead and add a new script tag up here at the top that pulls in PropTypes from unpackage.
[01:36] That's going to add a PropTypes global to our program. We can go ahead and remove our own implementation of PropTypes, and everything should work pretty much the same.
[01:46] There's one difference here now though. We're no longer getting the warning for the last name prop. The issue here is that all of the validators in the PropTypes module consider props to be optional by default, so if a prop is not provided, then the validator doesn't run. That's useful in some cases like where we provide a default value, like if were to add or unknown here for the last name.
[02:09] If we want it to specify a prop as required, we can simply .is required here for the first name and here for the last name. That will give us a new error indicating that this prop is required. For components declared as classes like this, we can continue to specify our PropTypes the same way, but it's more common to do this by making PropTypes a static property of the class like this. It works exactly the same way.
[02:34] Let's swap the development version of react to the production version. You'll notice now that our PropTypes validation is totally gone. This is because PropTypes is great for development, but it does slow things down a bit in an unnecessary way for production. The production version of react does not use PropTypes.
[02:53] This is great. If you want to improve things further, you can use babel-plugin-transform-react-remove-prop-types to automatically remove PropTypes from your code when you're building it for production, which will make things even faster for you.
[03:06] In review, to add PropTypes validation to your component, you add a PropTypes property to the function component or a static property to call PropTypes to the class component, like we're doing here.
[03:17] The keys of that object map to the props of your component. You then provide functions to validate the props. The PropTypes module has a bunch of validators available to you, and you can learn about those in the PropTypes documentation.