Hello, my programmer friends, welcome to another tutorial. In this tutorial, we’ll talk about a new topic. Which is Prop-type. You may hear about it or not. Hope this tutorial will help you to understand the topic easily.
At first, I would like to introduce you to what is prop-type? Prop-type is a type-checking method of reactJs. We can check our passed props data-type with this.
Now let’s talk about how does it work. Before the explanation, I would recommend you to have a deep look at the following example.
Example:
import React from “react”;
import PropTypes from “prop-types”;
function App(){
return(
<div>
<AnotherComponent name=”sakib” age=”noInfo”/>
</div>
)
}
export default App;
function AnotherComponent (props) {
return(
<div>
<p>
{props.name}
{props.age}
</p>
</div>
)
}
AnotherComponent.proptype ={
name: PropTypes.string,
age: PropTypes.number
}
Now if you run this code in your browser it will give you an error named “Failed prop type: Invalid prop age of type string”
Now you have to understand that why this error is occurring. This error is occurring because of unmatched PropTypes. You may notice that in the above example we assigned a string type value to the property age. But this not should be a string type value, it should be a Number type value.
Now if you assigned a number type value to the property age, it will not give you an error. Because now it matches with the PropType you declared.
In real our real-life project we can catch unexpected imputed or given data using this method. Also, we can inform and force users to give valid data.
Now I’ll discuss another topic which is related to the above topic. And it is default props. What are default props? default props is a default property, for example when a required input filed gets no input from the user it automatically replaced with the default property value. Hope the following example will clear your confusion.
Example:
AnotherComponent.defaulProps ={
nationality: “Bangladesh”
}
Now, let’s talk about a different topic and that is JSX. You might be surprised that what is jsx ? and how does it work?
- The first question is about jsx that what is it?
Ans: JSX is a syntax extension for react Js, and stands for javascript XML.
- The second question is about jsx that is it mandatory to use jsx?
Ans: No, it is not mandatory but recommended.
- The third question is about jsx that, what are the benefits of jsx?
Ans: you can easily create dom content using this.