Props & PropsTypes
Published: 2021-12-22 15:52:06




## PropTypes

[Prop Types are a mechanism to ensure that components use the correct data type and pass the right data, and that components use the right type of props, and that receiving components receive the right type of props. It is a very important mechanism for passing information between react components. JavaScript is not a strongly typed language. JavaScript Function to accept data of different types when this data is declaration the function. If you can pass a number to a function that expects a string. JavaScript will try to convert the number into a string and go on to the next operation.
Prop Types is a library and it helps minimize this problem by checking types passed in the props object against a specification you set beforehand and to raise a warning if the types passed do not match the types expected.
This section above, you saw how to pass information to any component using props. You passed props directly as an attribute to the component, and we also passed props from outside of the component and used them in that component. But we didn’t check what type of values we are getting in our component through props or that everything still works.

### React Props

React is a component based library. React Component Props are used from one component to another component to pass or share any data or object. Props makes use of directional data flow parent component to child component.it is works unidirectional data passing root component to child or under component. Props is the very important to data passing or information shearing way. However, with a callback function, it’s possible to pass props back from a child to a parent component. This data can come in different types to passing: numbers, strings, arrays, functions, objects, etc. if you pass props to any component.

**This example to following: **
`const parentAssets=[
{id:1,assetLocation:”Dhaka”,assetPrice:20,00,000},
{id:2,assetLocation:”Narayanganj”,assetPrice:30,00,000},
{id:3,assetLocation:”Dhanmondi32”,assetPrice:50,00,000},
{id:4,assetLocation:”Uttara”,assetPrice:70,00,000}]
Data Pass Parent Component to Child Component
<ParentComponent> 
 parentAssets.map(parentAsset=><ChildComponent   asset={parentAsset}/>)
</ParentComponent> `
####Data Received and used Child Component
*Received props*
`const ChildComponent=({parentAsset})=>{
const{assetLocation,assetPrice,id)=parentAsset;`
## Used Props
`<div>`
`<h3>Parent All Asset Details</h1>`
`<h4>{id}</h1>`
`<h4>{assetLocation}</h1>`
`<h4>{assetPrice}</h1>`
`</div>}`
####Result:  Parent All Asset Details
1,Dhaka,20,00,000;
2,Narayanganj,30,00,000;
3,Dhanmondi 32, 50,00,000;
4,Uttara,70,00,000;
####Real Life Example:
Your 	Grandfather, your Father and You. This three man are most powerfully and respectfully man at first your Grandfather then your Father. All of time your Grandfather also order following your father and you. Because Your Grandfather is Old Man and Your Family First and Respectfully people.so that your family also decision make your Grandfather .He manage your family also Situation .The same role play your father also order following You step by step. Because he is your parent. So that you can not replay order your parent.
Programming Example:
React is a component based library . This Component any data or information sharing parent component to child component. It is unidirectional data pass method. It is props dialing method up to down data pass or data shearing method. This up to down drilling method is parent to child data pass or Shearing.
This props drilling data passed method some time not working child to data pass her parents or down to up data pass or share .This problem solved for react  Adding some hooks and Context ,reduce .This Context use for any where data passed or data shearing easily .The Context used react any child component shear his data her up level parent component.

#####<span>Hablu Programmer ABUSUFIAN(cH@MoK)</span>