How to use Prop Types in React ?

 Why to use Prop Types in React ?

Props are used to pass down the data from the parent component to the child component but as our application grows the props we pass to the child components sometimes validate wrong and we get the wrong result also it hard to debug where we are lacking.

For example we want age in number datatype in the child component instead we pass age in the string data types so, we get the wrong result just by the wrong data type we passed.

So, in this type of case we need validation to ensure we use correct datatype for the props and we can also ensure what kind of data we want to put in the prop whether default or must have values.

How and When to use Prop Types in React ?

When working with functions , we pass arguments into the functions and when we pass wrong argument , it throws an error . Just like , we want to know where we are doing the wrong validation so we can correct at the point and specify those validation into our react app . In this case , the prop types is the best suited for performing the validation in the react app.

Initially the prop types is the built in module in the react , but after the react updates this is the different package and needed to be installed.
 
You can install into project by running this command into the project


Once , it has installed now you can import it into the component and use in the project


After installing and importing prop-types in react , it will be attached to component name where you import with the dot notation and in the object you can pass key value pair for prop validation


In the prop-types object you can pass key value pair where the key will be the prop name and value will the prop-type validation which you can pass.
Now ,let's dive into what kind and types of validation you can pass into this object

Types of Validation

1. Basic Types

Basic Prop-types validation where you can pass which type of datatype prop can hold whether string , bool , number , array , object , symbol and any datatype . 


If the prop-types validation  fail , it will throws the error and you must need to pass the prop in the datatype for the validation you have passed.


You can also required the prop in the validation , which means if prop is not passed into the child component it will throws the error and you need to pass the prop to the component .


2. Multiple Types

Props types can also include the what types of values you can include in the array and can also specify the datatype which you want to include in the the array.

The first one is oneOf method of the prop types which ensure which value want to include in the array .


If you specify any value rather than the specified one you get the error .

The second one is PropTypes.oneOfType which specify the datatype you want to include in the array and you specify rather than the specified datatype , you get the error.



3. Collective Types

In this type , you can specify which type of data types you want to validate the array or objects . If you want to specify only number datatype in the array and not the string where you can validate these types of conditions.


If , number is passed into the string with some type error , you will get an error.
You can also do this same with object as you can specify which types of data type you can specify in the object value and if you pass string to the value to the object and you validate it with the number then , you will face an error.


If you will pass some other data type into the object value , then you will face an error.

4. Default Prop-type

In this, default prop-type you can specify any value to the prop values . These values will be passed when no prop will be passed to the component.


Note :- This will only be passed when the userDetails prop will not be passed to the component.

Conclusion

In this article , you have learned about the prop-types and the basic validators methods and validate through any kind you wanted.

Feel free to code and learn daily by the daily blog post.

Thank you for reading :)



Comments

Post a Comment

Popular posts from this blog

Learn React Router v6 ( Part - 2)

Image
  Introduction In this section of react-router learning we can explore how we can read the data from the backend apis and send http request with the react router with the different functionalities  .  Data fetching and sending data back to the server is the most important process which react router make simpler and easier to understand providing error handling , fetching data , sending data , loader etc. Let's explore some advance concepts of react router makes react developers more simpler. 1) Loader  Loader loads the data from the backend apis and we can use the loaded data in our react web applications. We cannot send http requests back to the server instead get the data from the server and just use them to display some lists or information in the components We have two steps to implement loader into the system . First step :- We need to define the loader property in the route definitions object to load the data . This takes the function as a parameter where ...
Read more

Why use Typescript ?

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...
Read more

What is Single Page Application Routing ?

Image
  Single Page Application Routing? Earlier , we used to serve different web pages for the URL whenever the user redirects to the different path and whole application reloads where the sending http request to backend makes the application slower . So , in react there is a package name React Router which makes the multi page application feel to the single page application and the navigation concept in react seems feasible . Single Page Application (SPA) where the whole application load at once and whenever user visits some path, it will fetch the data from the server for the particular component and make that page visible to the user which feels like multi page routing. React Router package manager installed by npm  , and very important concept in react for the navigation  without the react router we cannot perform navigation in the single page application . There are three steps to implement the react router and navigate through the different components after installi...
Read more