Learn React PropTypes In 13 Minutes

crop types are incredibly useful when it comes to fixing and finding bugs in react and in this video i'm going to give you a complete crash course on everything you need to know about prop types [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now i just have a really basic react application set up and i have my app.js and all this is doing is rendering out our component we're passing in the name sally and the age of 15 and in our component we're just rendering out a string that says in five years print out the name will be and we're adding five to their age you'll notice on the right hand side of my screen it says in five years sally will be 155 but if you remember we passed in 15 as the age of sally and this right here is a super common bug that you're going to run into when you're writing react code this age should be a number but i'm passing it in as a string by accident so it's causing the bug where it's making the string 155 instead of 20 like it should be if i change this to be a proper number instead of a string and save you can now see that sally will be 25 years which is the correct age so this is something that is a big bug that you're going to run into it's really hard to fix if you accidentally introduce this and don't see exactly where the code is outputting but by using prop types this is a super easy problem to avoid and you're never going to have this issue again and this is really why prop types are really useful also you could use typescript instead of your application but sometimes the overhead of adding typescript is too much when all you want is some really small type checking in like a smaller application or just for a few locations and that's where prop types really excels so let's change this back to how it was before and what i want to do is install prop type so we can actually see how we can implement this and fix this bug so to do that we need to actually install the prop types library it used to be included in react but now it is separate so we can just say npm i prop types just like this that's going to install everything we need for prop types and once that's done we can restart our application and actually start using it let's just start up our application now to define prop types we just go to the component that we want to define our prop types for for example this is going to be this component here and all we need to do is import prop types so we're going to import prop types from prop types and then this is going to be the exact same whether this is a class component or a function component it does not matter at all and all we need to do here is just take our component name we just say dot prop types and set this equal to an object make sure this is a lowercase prop types here just like that and this object is going to have a key for each one of our props so in our case we have a prop for name and a prop for age so we'll just say name and we're going to say h those are our two different keys and then we just need to define the types for these so we can say prop types dot as you can see we have a bunch of different functions and properties we can use for us a name is just going to be a string so we can use the string property and that is essentially mapping this prop type of string to our property of name same thing with h we can get our prop types dot number because this is going to be a number and now when we save you're going to notice nothing actually changes but if we actually just come over here and inspect our page we go over to the console you're gonna notice we have an error in our console it says warning failed prop type invalid prop age of type string supplied to component expected number essentially it's saying hey for the prop type of age we expected it to be a number but we actually gave it a string so if we go into our app you can see we passed in a string instead of the correct number now if we change this to a number and save you're going to notice we no longer get that error this is showing up because it was from before but now if we just save you know and if we refresh our page you can see that that error no longer shows up in our console because we fixed the incorrect prop type that's where all your prop type errors are going to show up they're going to show up in the console of your application so it still does require a little bit of work to make sure you dig through the console to see if you have any of those errors showing up but if you have good testing and such showing up you can really easily see where these errors are that's one advantage typescript has is it shows up in your editor but typescript is a lot of extra overhead while prop types you can just add and remove at will without any extra work now let's say for example we actually remove the age here and we click save we come over here you know we refresh our page you notice we don't get any errors in our console at all but you'll see here it says in five years sally will be nan obviously that's incorrect that's because by default all the prop types you define are optional in order to make a prop required you need to make sure you specify the is required property after you define what type the property is just put is required at the end that'll make the property required now we made sure our name and age are required now when we save this you can see we get an error that says the prop age is marked as required but its value is undefined is that it's not being passed along so immediately that's throwing us an error in the console so we know that there's something wrong with our application now so far we've only covered string and number but there's a lot of other basic types you can check for for example there is an array that you can check for boolean is just.bool you can check to see if it's a function you can check for number like we've talked about object which is just a generic object of any type you can check for a string and then finally you can check for symbols so that's all your basic different types of prop checking but there's also some react specific props that you can check for things such as components and renderability so if we just want to check to see if a prop is able to be rendered let's just come in here and we'll say renderable and we're just going to return that we'll just say return renderable if we want to see if something is renderable well what we can do is come in here with the actual name and there's a prop type called node node just means it's renderable this could be a string an array a component something like that something that is renderable in react if we go in our app.js we make sure we take renderable and we make sure we pass it something like a string that says hi now we're not going to get any errors and you can see it prints out high to our screen up here but if we pass it something that's not renderable for example we pass it in object that just has you know a1 and we save you're going to notice we don't get anything rendered out here we're going to get an error because this isn't even renderable and also we're going to get an error for our prop type if we just scroll up far enough you can see we have an invalid prop renderable supplied to component it expected it to be a react node essentially something that can be rendered and an object is not renderable by react also what we can do inside of here is if we want to make sure it's an actual react component so this would only work for react components we can come in here and say that we expect this to be an element and then what we could do is you know for example pass in here a react component but we could just say some component whatever it is and now it's going to render out that component whatever it is that we want to pass to this it could be another component whatever it just has to be a react component otherwise it's going to throw an error an actual really useful case for where you would want to do this if we just clean up our code a little bit and get rid of this and we'll just render out null for now if you want to make sure a component only accepts one child component we could say that we want to take the children property it has a prop type of element and we want to make sure it's required this means that a component can only ever have one single child and it has to have one child and that child is a react component so it's a really useful way to be able to do this and make sure we pass a child to our component as you can see we're getting an error if we just scroll down to the bottom here that error is essentially saying that we don't actually have a component being passed in as you can see here it says the prop children is marked as required in component but its value is undefined so we're not actually passing that child in so it's giving us an error now the final react specific type that i want to talk about before we start diving into some of the more advanced type checking is going to be to check to see if this thing is the name of a component so the way we can do that instead of using element is we could just change this to element type you know this would be for whatever prop component name commonly you would see this as like as if you used react router before you would use the as property we could just say you know render this component as a link for example where we render the link as a component we just pass it the name of a component and it's going to do some stuff in the code with that that is what element type is going to be referring to the name of a component as the component like this now with that done we can kind of dive into some of the more advanced type checking so if we come into here one thing that we can check for is any so let's just say we have a prop name and we want to make sure that it could be anything string number boolean i don't care what it is well you just say prop types dot any this is going to be for any property at all and generally if you do this you would just want to make it required so this is saying hey i have a property for name it could be literally anything i don't care what it is it's just going to be required that's one thing that you'd want to use generally try not to use any but if you have to this is what you would use another thing that we can look at is for multiple types so let's say that we want to have a string or a number this property could be a string or a number we can use a function on prop type this function is called one of type this one of type takes in an array of different prop types so we could say this is going to be a prop type of string or it's going to be a prop type of number we pass it the array of string and number and that just means this property string or number can be either a string or a number so if we pass in here string or number and let's just clear out a console and we pass it in a string at first no error we pass it in a number no error but if we pass it in something like an array you're going to notice now we get an error because string or number was supplied and it shouldn't have been a array it should have been a string or a number now something that's pretty similar to one of type is using the one of function so we can just say one of like this and this instead of taking an array of props takes an array of values this is really useful if for example you have an enum for like different states so let's just say that this is going to be a state and it has values or it can either be for example loading or it can be ready so these are the only two values allowable for this state so now if we try to pass in state here make sure i just close this out and we pass it in the string of loading you can see it works we pass it the string already it works if we pass it a string that's not in that list you'll notice it gives us an error saying hey this was supplied but it's not either loading or ready another really cool thing we can do is remember we could say that something was a type of array what we can actually use a step further from array and use array of that'll actually type check the values in our array so by saying it's a property of array it just means it's an array of whatever so we could just say this is an array and inside of our app we have an array that's being passed in let's just say we pass in an array that goes one two three pretty self-explanatory as you can see we have no errors over here well now what we can do is we can say array of and we can see that we want this to be an array of number so we can say proptypes.number now since we're passing an array of numbers this works if we pass it an array of strings for example you're going to notice now when we save this we get an error because it's saying that the array has values that are not numbers inside of it this is a great way to make sure that the values inside of your array are exactly what you want you can even go a step further and combine multiple pieces together we could say it's going to be one of we could say one of type prop types dot number or prop types oops prop types dot string make sure we put that inside of an array and now essentially what we've done is we've said hey we're going to have an array and in that array everything is either going to be a number or a string and now you can see we can pass it strings we can pass it numbers and it's going to work just fine but as soon as we pass it something that's not a number such as an array you're going to see it throws an error because we're passing an array which is not a number or a string now the final thing i want to talk about is going to be the shape and exact properties and these are some of the most useful because they allow you to define different objects so let's just say that we have a person here this person has a bunch of different properties on them we could say prop types.shape and this allows us to define the shape of this person this just takes an object this is like nesting your prop types inside of each other let's say the person has a name and the name has a prop type and this prop type is going to be string and let's say it has an age which has a prop types dot number just like that so now we have a person with a name and an age that we're passing so if we go into app.js if we take our person and we're going to pass in an object which has a name of file and we'll say that age is 26 and we save you notice we get no errors but if we make this a just string we're now going to get an error because it's saying that this should have been a number and that's by using this shape property something kind of interesting though if we go back to where this was working we add an additional property such as just say favorite food we put rice inside of here you'll notice we don't actually get an error that's because the waste shape works is it just defines the overall shape but it doesn't have to exactly match this it's just saying hey this person object has a name and it has an age if you want it to only have a name and age then we would replace shape with exact and now we're going to get an error because it's saying hey this can only have a name and an age but it also has this favorite food property so there's clearly an error here so shape and exact are going to be some of the most useful properties you can use and also you can combine is required with any of these and for example we could make this a one of type you know we can really combine a bunch of different things together so that's the really nice thing about prop types is you can kind of infinitely combine them together to make more and more complex prop types really define exactly what your application looks like and then you can use the console log errors to figure out where you're having problems where you're not passing the correct thing in and that's all there is to prop types if you enjoyed this video and want to dive even further into react i highly recommend you check out my full react course linked in the description down below and with that said thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 30,192

Keywords: webdevsimplified, react propTypes, proptypes, react js, reactjs, react js proptypes, prop types, react prop types, proptypes tutorial, proptypes vs typescript, proptypes vs ts, react proptypes tutorial, reactjs proptypes, react js prop types, prop types js, js prop types, javascript prop types, javascript proptypes, js proptypes, js, javascript, react, react tutorial, reactjs tutorial

Id: cx0S8JyiVxc

Length: 13min 11sec (791 seconds)

Published: Tue Aug 03 2021