What are Props & PropTypes in React?

What are Props & PropTypes in React?

What are the Props?

What are the Props?

Props basically stand for properties in which data can be passed from parent to child component as an argument. They are read-only, i.e., immutable, which cannot be modified inside the components. In other words, that is how the different components can communicate with each other using props. Props can’t pass the data from child to parent component or at the same level. In that case, we use a library called redux.

Based upon the classification in types of components, i.e., functional and class components, the way of writing the syntax props are a bit different for both types of component. Here is how:

Syntax of Props in Functional Component

In the case of functional components, which is like a regular function, we pass props as an argument. Then we write props followed by calling the name of the declared data using a dot (wrapped inside curly braces as Javascript considers this as an object), which we want to render inside a return statement that either returns JSX or nothing, as shown below:

Syntax of Props in Functional Component 

Alternatively, with the fat arrow, it can also be written as below:

fat arrow

Syntax of Props in Class Component

A class component like a functional component is also a standard function but here () is not being used; hence we cannot pass props the same as functional ones. Since it is a class-based component, we use ‘this’ keyword to call the current class in Java basic programming language. So, here we write ‘this’ followed by ‘props’ followed by ‘name of the declared data’ using ‘.’ as stated below:

Syntax of Props in Class Component

What are PropTypes?

PropTypes is the third-party library (for both React JS & React Native) used to dynamically pass the data as props from parent to child component. In addition, they are used for type checking on props for a component.

PropTypes exports many validators that can be used to ensure that the received data is valid. Therefore, it can be helpful in case of removing any bugs in the project if the wrong type of data is provided, and it will give a warning in the console log in development mode, which the developers can debug. 

How to use PropTypes?

Installing into the React Project:

Installing into the React Project

Importing into the JS File:

Importing into the JS File

Basic Types of PropTypes

The most effective way to check a prop’s type in PropType is to check whether it comes under the category of primitive data types such as boolean, string, object, etc.

Following is the table, which includes all the data types considered primitive or the ones with classes that can be used to check type checking in props.

Type Class Example
String PropType.string ‘Hi there!’
Object PropType.object {name: React}
Number PropType.number 19
Boolean PropType.bool true/false
Function PropType.func const tech ={console.log(‘React’)} 
Symbol PropType.symbol Symbol(‘r’)

Syntax with Example

To understand the PropTypes better, let’s look at an example of how it works when we use it in a React code. 

Here we are taking two reusable components, i.e., About.js and Count.js. The ‘About’ is the parent component, and the ‘Count’ is the child component, as shown below:

Syntax with Example

Output

Output

Let’s see what happens if we change the value of the age prop from a number to a string without altering its PropType.

string without altering its PropType

We will be getting the error in the console something like mentioned below:

Error in the console something

It clearly says that the value of the age prop passed does not match the expected value of its PropType.

Conclusion

To conclude, props are useful and play an important role in passing the data from parent to child component. However, as they are read-only properties, the data passed from one component to another component cannot be changed. 

PropTypes are an efficient way to handle the errors at run time and to type check when passing props as any data type. They are mainly used when developing larger and more complex applications.

Summary
Article Name
What are Props & PropTypes in React?
Description
Props is a property in which data is passed from parent to child components as an argument. They are immutable, and props can’t pass the data from child to parent component or at the same level. In that case, we use a library called redux.
Author
Publisher Name
BugendaiTech Pvt Ltd
Publisher Logo
Spread the updates

Leave a reply