What are React Prop Types?
React prop types are basically a runtime type checking. Prop types check similarity between the objects or variables. We can document the React components for the types of properties that we intend to use the prop types. React library and many other libraries verify the props in your code that will be transferred. They will check the components that will travel against all those definitions using checkPropTypes. And if they don’t match then they’ll warn us about that. In props, we had already seen how we can pass information in any of the components using props. We can pass different types of information like arrays, strings, integers etc. as props in the components.
So, how about we recall how we passed props in the components? In order to pass the props in our components, we can do two things. We can either pass the props directly as attributes to the components or create default props. We used to pass the props from outside of the component and use them inside the other components. However, over there we did not have checked the type of values that we are getting through props. Still nonetheless it was alright.
Prop types in React:
In order to validate any kind of data that we are receiving from props, we should use propType. However, before using that we all know that we have to import that module. In order to do that we will add the following line at the top of our index.js file:
import PropTypes from ‘prop-types’;
As soon as we import the propTypes, we are ready to work with it’s functionalities in our program. Likewise the defaultProps, propTypes are also one of those objects where keys describe prop names. Here the values describe their types. The following code shows the usage of propTypes:
ClassComponentName.propTypes
{
prop1 : PropTypes.array,
prop2 : PropTypes.bool,
prop3 : PropTypes.String,
.
.
.
.
propn : PropTypes.dataType
}
So we see in the above syntax that the ClassComponentName is the name of the Component that belongs to the class. DataType can be considered as any type we are allowed to pass as props to our components. A warning will occur on the console for the props that do not validate to the type of data that is specified.
So, now we’ll see the complete program for our own better understanding where we will be using propTypes for validation:
As we saw previously, we are passing a prop by the name numberProp as a string. However, it will validate it as a number. Nonetheless, everything other than that has been rendered perfectly on the browser. But for that our browser console already has a warning message.
In this message, we can see that the prop named numberProp was expected to contain a numeric value. But instead of that input was a string value. In order to get a full view of what valid types a prop can take, you can always refer to the official doc of ReactJS. In there it has mentioned all of the valid types a prop can take. Also, in the recent versions of React they have moved the React.PropTypes to a new destination. That destination is a different package and will have to install it separately for use.
Benefits of React Prop Types:
ProtoTypes help us to type check our props. It also warns us if we pass a different type of prop than the ones intended by the child component. As we all know, JavaScript is a dynamically typed language. And also the types are determined right during the runtime. Java that is statically typed and the type of the variable must be identified just during the initialization. And it should not change after that anymore. With the help of PropsTypes, we can set the type that we want. And this is possible simply by using PropsTypes property in the component that we have.
Installation and Usage:
It is advisable to use Prop-Types libraries instead of their own. For using propsTypes in your React application, we need to install the following props-types library: npm i props-types.
React Prop Types: Fundamental Validations:
We can declare that a prop is a specific type of JavaScript and by default, these are all optional.
PropTypes.array: It is specified by this that the prop is an array.
PropTypes.bool: It is specified by this that the prop is a Boolean.
PropTypes.func: It is specified by this that the prop is a function.
PropTypes.number: It is specified by this that the prop is a number.
PropTypes.object: It is specified by this that the prop is an object.
PropTypes.string: It is specified by this that the prop is a string.
PropTypes.symbol: It is specified by this that the prop is a symbol.
Prop Types: React element Validation
It is specified that anything that is read by React should be sent using: PropTypes.node. And if we want only a React element to transfer then : PropTypes.element should be used.
Prop Types: Instance Validation:
The instance of the prop can be validated. Whatever we do we must specify that the props shared should be an instance of any particular class. We can also declare that a prop is an instance of a class and this makes use of the instanceof operator: PropType.instanceOf(class)
PropTypes: Specific Values Validation:
What we can do is specify that our props must be some very specific values and also that it must be either this, that or any of the values that are present in the collection.
Prop Types: Multiple Validation
Most importantly props are of any given type. The Prop type can be anything starting from a string to a Model. Anything else apart from the list will be rejected. As a result we will receive an error.
Prop Types: Pass anything
React can also make sure that a prop is provided. So for that we need to append the isRequired to any of the PropTypes validator.
Conclusion:
In this article, we have learned a lot about React Props Types and also how we can check for the types in our React components. Validation such as this will definitely help us in predicting the outcome of the React components during its phase of development. We hope that you have enjoyed working through this article and hopefully it has shown you how important the props and the propsTypes are in the process of building a React application. Without them, it will really be difficult for us to keep on passing data between the components when there is some sort of interaction. They form a core part of the component driven architecture for self management that React is all about.
PropTypes are like a bonus in that they help us ensure that the components are using the correct data types and that they are passing the right data and also that components are using the right type of props. It also makes sure that the receiving end also receives the right type of props.
