#3 React Component Props - A detailed simplified explanation

in this lesson we're going to talk about props in react we're going to see why props are so important and why they are a fundamental aspect of react components so the first I'm going to do is start my server mpm runev just as I've shown you in the previous lesson this is where we stopped in the last lesson now in the last lesson we looked at components which allows you to create a reusable piece of code which is a reusable piece of UI that you can use in different places so here for button. GSX we have this button component and here we have this reusable piece of UI code which returns a button click me and by using that here button button button button five times you can see we have click me click me click me click me click me and because this is a reusable function if I change this to don't click me you can see in those five places where I use this component here you can see it says don't click me and if we also inspect the D for this if I expand this let me zoom in a bit if we open this div ID of root if you remember div ID roote is coming from index.html I remember I said this is where react would dump all its stuff so here you can see we have div ID rout and in this div ID rot we have a div here if I come to app. GSX this is the div this is the div we have here if you open this div we have this button that says don't click me because we have these components here if we go to the component button. GSX you see button don't click me and we have a couple of button don't click me here now where does props come in if we have a normal function like this in JavaScript you have this function called sum which takes two parameters adds those two parameters when you pass 10 and 50 as argument you get a different result if you pass 100 and 1,000 you get a different result so how can we make these components return different results based on the arguments that are passed to them and this is where you pass props now let's take a normal IMG element your normal IMG element you can pass different attributes which can also be called properties which can also be called props you can pass your SRC you can pass your widths you can pass your Heights prop you can pass ID prop you can pass a bunch of props here now this is the same way you would pass props to your react components and you can also pass a prop like decode but in this case the IMG element is not going to use this property because it is not expecting this property and let's say I take this from here and I put it in app. GSX just before the button SRC I'm going to use a link to one of my very handsome images to give this a width of 100 height of 100 ID of 50 and now we have this image here right and if I pass a different SRC here I have a different image so I can use this IMG tag in different ways by customizing the properties but for this decode property the IMG element is not going to use it because the IMG does not expect anything like decode well this is how components also work so for this button component I can pass any property that I want to pass I can pass a label property click me for this second one I can pass a label property submit for this third one here I can pass a label property hello and let me comment these two buttons for now now by passing this property here which is prop to this button component you can see that the button is still saying don't click me you have not yet informed this button component that it should expect a label prop just the way with the decode the IMG element was never informed of a decode prop that is the same way our button component currently is not informed of a label prop so now we can go to this button component and we can tell this button component that you should expect a label prop now how do we do that remember when you call sum previously you can call sum with 10 and 100 now this is the same way you're are going to call Button like this button and then you pass your props this is how react would call your function with this props and this props is going to be an object let me put this at the right here so in this case here where you have label click me what you are doing here is you are calling the button function with an object and in that object you have label click me and also let's say you have a different property here also called ID and maybe this ID has special it means you're also passing this same object with an ID property of special so by doing this you can think of react internally calling your function like this now how do you assess the props here well first off you can have a parameter called props and then by calling button with this object like this this object is going to be passed as an argument for this parameter props and now if I should open this on its own page and I comment this it means now that on this props you can get the label so constant label equals to props do label remember props is an object you can also call ID props do ID now let's do console log props so that you see what I mean so if I should open my browser console here if I refresh you can see we get a props object here that has label clickme ID special which is coming from this and you notice this is logged two times this is something that happens during development when you're building with react don't worry about it I will explain this later on as we progress in this course you see we have label submit this is coming from here see we have label hello this is coming from here if we go back here like I said it's just like you are calling the button function like this and you're passing this object and now we can assess this object based on this parameter props now let's say I want to show this label in place of this don't click me well I can take off that text now if I should just put label like this you see we only get label label label because react sees this as just a text now how do you tell react that I am referring to to this label variable this is where you have your open and close collie bracket so you have your open and close col bracket this allows you to embed JavaScript expressions in your component your Expressions Can Be Strings numbers conditional operations anything that classifies as an expression in JavaScript can be fit here so here we can pass the label which is a variable expression and now look if we come back to app. GSX for the first button that has a label of Click me you see click me here for the second button that has a label of submit you see submit here and for the third button that has a label of hello you see hello here because we're able to pass all these things as props we can extract those properties from this props argument and now we can embed this here which also means that for this button because HTML button elements have ID I can say ID have my equal to and I can use this open and closing col bracket again since I want to pass a variable and then I I have ID here and now if I should open the console if I come to element and I come here you can see the first button has an ID of special so if I come here because this has an ID of special and we extracted it and put it here you can see the first button has an ID of special but if you notice the second button doesn't have any ID here and why is that the case well that is because we didn't pass any ID prop here so there was nothing to extract here so here I can say ID something else and now you see the second button now has an ID of something else and for this third button here I can have an ID and I can say how are you and here you can now see because I passed this ID prop here I extract the prop here and then I assign it here to the button you can now see we have button ID how are you so this is how you use props to create reusable components in react you have one component and by passing different props that component can show different things now coming back to these examples here if I should uncomment these two button components you see we get these two empty buttons here there is no text and that is because we didn't pass any label to the button so how can we Define what we call default props default props is just like saying if this component is used without this prop use this default value instead now how can you do that well here you can use the knowledge coalescing operator to say if props do label is not null or undefined use props do label else use default so the knowledge coalescing operator allows you to check whether a value is null or undefined and what you're saying here is that if this is null or undefined use this but if this is not null or undefined use this now when you don't pass any label here or pass any label here we are trying to assess props do label just as you have with object if you have an empty object like this and you try to assess obj do type obj do type is going to be undefined because there's no type property here so you can think of it also like this if you're passing props and you're not passing any prop that means you're passing an empty object so when you do props do label it's going to be undefined for this and then you return default and now if we come back here you can see that these last two buttons now have default and default because we didn't pass any label but if for the last property we pass a label prop and we say yo yo you can see now that we have yo yo here but this button still has the default value for the label prop now when it comes to props in react components you can pass strings as we are doing here but you can pass different types of values here I can take this line off as we have already established props allows you to send value from one component which is the parent component to this child component and then that child can use those values to do different stuff but you can pass different types of values for example we can come to heading here and say that this heading should have an items prop and because I want to pass an array I cannot just do array 1 2 three like this array is something specific to JavaScript if you want to pass expressions like this to your component you wrap it in collie bracket like this so you have your collie bracket this is not an object this is just a Col bracket that says I want to pass a JavaScript expression and now we are passing this array here if you want to pass an object you would have to do two c brackets so the first one is saying I want to pass an expression and then the second one is the actual object but I'm just going to return back to array so you can pass an array to this items prop to The Heading component and now we can go to this heading component and tell this heading component to expect an items array so here I can say con items is equals to props do items and now if I should do console.log items if I open my console again you see we get 1 2 3 this is is coming from here 1 2 3 and we also get undefined here and why are we getting undefined but that is because we use this heading component two times we used it here and we used it here the first time we used it we have an items prop but the second time that we use it we don't have an items prop so when you do props do items is going to be undefined and that is why you have undefined so now we can go back here and for the heading we can pass another items and we can give these items oh we have to have our col brackets first and I can give this hello high and now if we come back to the console we have 1 2 3 then we have hello high so like I said you can pass props of different types arrays objects booleans in fact you can also pass functions and let me show you an example let's say up here we have a function that says print decode and all this function does when it is called is to do console log decode now for this button we can pass a prop called when button is clicked and then we can pass this print decode function and now in this button component you can do const when button is clicked or you can just even say when clicked it doesn't matter and then you can say props do when button is clicked and now you can just call when clicked like this this is going to be a function because we're passing a function from here to here and now we can call when clicked because this function will be assigned to when click but if I do this we're going to get errors and let's try to check the errors to see if we can understand it so the error says when clicked is not a function now why do you think this is the case remember again for this button we passed when button is clicked but for this other buttons we didn't pass when button is clicked so that means when you come here for the other buttons when button is clicked it's going to be undefined So when you say when click like this it's going to look as if you're calling undefined like this and undefined is not a function so when you're passing props like this props that are optional now that you don't expect for every component then you need to do some checks before you try to use that prop so here what we can do is if when clicked so if when clicked is not null or is not undefined then we can call when clicked in the case of the first button we pass when button is clicked so this will be called but for the other buttons we don't pass when button is clicked so it's going to skip this if block well if we open our console back and I refresh you can see we now have decode decode is called when we execute when clicked when clicked comes from props do when button is clicked and this comes from App component passing this prop to the button component so prop allows you to send information down to Children components and it allows you to also do different stuff in those stent components you can say your button should look like red if you pass a prop of type danger your button should look like green if it receives a prop of type success so you can do different things here based on the property that comes into it how you would often see developers Define props in their component is that they don't have props like this then they now have props do items instead they use object destructuring and you can use this in two ways for your props the first way you can use this is instead of having C items equals to props items since props is an object you can inser the structure props and then here you get your items so this line is the same thing as this line the only difference is that you're using object destructuring to get the items property another way you can use object destructuring is that instead of having your props here since you already know the props is going to be an object you can do your destructuring right here so here you can have your D structuring and then you have items like this and if I should do console log items if I run this you can see this items one two three I can see this items hello High which is coming from this heading and this heading if I go to the button we can repeat this same thing here so for this props I'm going to destructure it from here I can destructure the label prop the ID prop the when button is clicked prop now in this case I want to rename when button is clicked to when clicked but since when button is clicked is what is coming from our components here then with object destructuring I can use a colon to rename these two when clicked then I can also comment this label and comment this ID here and now you see we get the same same thing the only difference is that we did our destructuring from here now for this case of the label remember we have a default value here we can also Define default value here by doing equal default so what this means is that if you don't pass the label prop we're going to use the value of default for label you get the ID prop here we get the when button is clicked prop we reassign it to a variable called when clicked so this is how you'd often see it instead of having props do this props do that you just destructure it Direct directly from here remember again if you pass a prop like dcode equals let me pass a number I have to use col bracket because number is a JavaScript expression if I pass 50 the button component is not going to do anything with decode 50 that is because you have not told the button component to expect a decode property but here we can extract the decode property and then we can come here use the decode property for something or we can even put the decode property in this button so after putting the label I can put decode and see now we have click me 50 because we have decode here if we didn't tell the button component to use that prop it is not going to use that prop that prop is just going to be here but now we have told the button component to use it and now we have decode here which is 50 and I can also pass a default value for for decode so if nobody passes a decode property when using the button component use a default value of 1,000 and now you're going to see the rest have 1,000 except this one having 50 because we Define a value for this prop now one more special prop that react components have is the children prop how is this prop used let's say here we have the button component now if you remember all these times have been using the button component we don't have an open and Clos tag we just have a self-closed tag where we have the button and then we close it here but what if we want to have the button component like this open close then in here we want to have something now if you see this component here it shows different default 1,000 why if we check here the label has a default value of default the decode has a default value of 1,000 that's why we have default 1,000 but how do we tell react that we want to use this this is why you use the children prop and this children prop is available in react component so here I can say children now if you notice here I didn't declare any children like this but react already adds a children prop and that children prop is going to be assigned whatever you put in between the open and closing tag so yeah I have my children prop I can have label decode and I can have children and watch what it shows it now shows something and this something is coming here instead of something I can even have an HTML element so I can even have a paragraph that says hello and this paragraph hello is going to be this children which we're going to put here this is HTML element I can even have another component for example I can have the heading here although I shouldn't be having a heading in a button but but in this case I'm putting the heading in this button and this P tag and this heading makes up for this children prop which we have put here so now if I should remove this label and the decode You' see all the other buttons are empty because they don't have children but only this one has children but if I come to this other button component here and let's say I do this one for opening then do this one for closing and I just say closing something you're going to see now the first or this is the second button second button now has closing something thing I hope this lesson shows you how props Works in react and why they are a key fundamental of react components because this is how you are able to create reusable components you can create one component that can be displayed in different ways based on the props that you pass to it just like you have your sum function and by passing different arguments you get different results same thing with your components you pass props which can be seen as arguments to your function and that way you can get different U I results now all these components we have seen so far they don't really look nice so in the next lesson we'll be doing an introduction to styling your react components

Channel: Deeecode The Web

Views: 1,025

Keywords: deeecode, reactjs, simplereactjs, hot reloading, vite, component, props, jsx, react elements, react components

Id: KGDi6818H4w

Length: 19min 38sec (1178 seconds)

Published: Sun Nov 12 2023