React Props and Variables - Become a React Developer: Ep. 2

hello everyone in this video we will be creating more components and expanding on props um just as a brief recap of what we did in the last video we created a component here called component1 with hello and the name of different people and the names were passed in through what react calls props and we have a prop here with the va with the name of name and that is the name of a person and that is passed to the component here and we have access to it through this props and in between brackets we can access that component using props dot and then the name of the component which in this case is name okay now let's create a header for our website and so let's create another component and let's create actually a folder called header oops header and let's create another folder called greetings and let's move component one the component one stuff into the greetings folder and we can do that just by dragging and dropping now that's gonna mess up some of our import paths um let's see what the problem is here so if we have app.js it's not able to find component one because we added the greetings folder so we have to update that path and save okay everything works as it did before now now for header let's create a new header file called header.js and also header dot css and we can just copy everything from component one to make it faster and paste into the header component let's rename this header and anywhere you see component pretty much just rename editor okay now the header is not going to return the same thing as component one so let's delete this h1 let's create a div let's create a class name so when using react um when you want to create a class the proper way is to use class name and not class like you would in normal html so let's give the class name header go ahead and div and in header so let's just save that let's go to header.css and type in header div let's go position fixed and top zero pixels actually we don't need pixels just zero left zero right zero and let's give a height of a height of let's say 150 pixels let's save that let's also give a background color let's say dark blue and save now in app.js let's import header import header and hopefully that should auto complete for you so you don't have to type all of that out okay so now we can put the header before the components so let's add the header here save okay perfect and you can see that that you can't see billy or steven any you can't see tom or sally anymore so let's go to component1.js and in this let's give this well actually the easiest way to fix this problem would be to go to header dot js and let's have another class let's have another div class name equals header let's call this one header div and let's call this one header okay and let's have another div class name that this one will be our header spacer okay if we save nothing should change but let's go to header.css and add the header spacer and this will be width 100 and height under 50 pixels and save so that takes the place of this since this header was fixed it wasn't pushing any of this stuff down but now that we added a spacer div to basically space the way we want it pushes the these components down okay so that's what we want and now now let's go like a point one dot js actually let's go to app.js so instead of passing names like this let's define these names const and let's define this as tom and then set tom which actually let's go name one name one and set name one so name one is the name of the variable and set name one is a function we're going to need to be able to change that name we won't we cannot change this name without using this function now i'll show you how that works in a future video the subsequent video after this one and to give this an initial value we can say use date and we want to use tom and let's copy that and name two name three name four and likewise let's update these three two and let's update the names as well oops there we go sally billy and steven and now we can go name just name equals we want to use name one name two name three and finally name four for steven if we save that use state is not defined we have to define use state and we can do that like this import use state from react and save okay so you see now that we're passing variables into here instead of hard-coding the name like we did before and same result over here on the left so let's say we want to change one of these names so for component one let's go to component1.js let's add a button a button and let's call it well let's um yeah we give it a class name let's say btn okay let's say reveal last name so when we click this button the last name for tom will appear and the last name for sally will appear and so on so first let's uh well as you can see there's an error here and there's an error here because when we return in reacts we can only have one parent html tag right now this h1 is apparent and button is apparent so what we can do to fix this is we can create a div and and now that div is the parent and these two are children so there's only one parent here so we can see the button was added for each of them so let's give that a little bit of css 0.1 let's see it says let's go button let's go with fit content let's go height 40 pixel font size 25 pixels background image let's go lin let's go radial gradient i'm not really sure how to use this but let's see if that works save and forward radius 5 pixels and border to pixels solid okay so what we want to do with these buttons is if we click them the last name will be revealed next to the name button hover let's go cursor pointer and [Music] let's go border color yellow save for app.js some quick styling here as well for the entire app so if we go here we can see the classes app so for that let's go um position also fixed the whole page make it simple top zero the left zero right also zero and height hundred percent and let's go background color [Music] and we'll see background color background color black and that hit our words that's okay component one h1 so for h1 let's go color white and save okay perfect now but we can also do okay that's good for now now if we click on one of these we want that last name to appear so what we can do is go back to corner 1.js go to the button and so we need a function right that's going to reveal that last name so this button will take take the parameter on click and on click will be a function first let's do it this way and that's a button clicked is that function now if you go up here define const button clicked and if the button is clicked then we want to change the name to the full name so if we go to [Music] we go to app.js we can see the names here we also need full name so we can have another variable let's call it full names and that equals um we can have name one as the first name comma and tom and say smith is the last name sally for sally that they'll be named two let's say stevens is the last name third name three and let's go green as the last name and name four let's go thomas as the last name okay now let's put that here after the names are defined and save that it says smith is not defined so these are strings so we need to put strings around the name and save that okay so now we can uh we can give more than one prop to a component so we can give this component one the prop full names all names and then similarly we can get we should give that prop for each component so now the component one has access to this full names variable or prop and if we go back to component one what we can do is if button is clicked we should also pass the button the name and we got name up here and what we can do is we can loop through the array full names so [Music] dot props.fullnames.lang five plus plus okay now if name is equal to [Music] props the full names we go back if it's so if let's just let's just go over component one so component one gets the name of name one name one is tom so name name is tom and what we're saying here is if name so if tom equals if tom equals this then we want this um list here so if we go back props the full names at i and 0 for the first name if that is equal then what we want to do is we want to change we want to change name to full name so we're going to use set name so what we can do here is set name one set name one we need this this function to ch to change the value of name one we can't just change name ones anything without using this function so if we save 0.1 so if we go props dot name and change that to props the full names oops i one okay so what we did here is so what we did here is we this is the first name and this is the last name and we want to change name to first and last name so it appears here but this is not gonna work because we can't simply set name like this we have to use this function that we passed so what we can do is we can let a variable equal name called name one and then we can use props dot set name set name one set name one equal to name one we can save that set name one is not a function okay we can go back to app.js set name one set name one you should actually just go set name because these are all going to receive the same thing so just do this first but this should be two three four let's save and if we go back to 101.js it should be props that set name and let's save let's refresh maximum update death okay so the problem here is this on click function it's being ran on render and it's not being ran only when we click the button what we can do to change that is create an arrow function like that and save and that will fix our problem so now this function will only fire when we click it which is what we want so if we click reveal last name this hello tom this name should be tom smith okay let's try it and you can see that's what happened let's um add a little bit of styling there let's about a space so it looks a little better save refresh click hello tom smith now if you click again nothing should happen because it's not going to find because right now what it's doing is it's looking in it's looking through the first item in each of these lists so name one name two name three and if it finds a if it finds something similar it's it's going to switch but now since tom smith is the new name one it's not gonna do anything oh actually yeah that makes sense it's finding tom smith and then adding another smith and then now it's finding tom smith smith and then adding another smith it's not necessarily what we want but it's okay we can't easily change that with more logic here but that's not the point of this video sally works billy is working and steven is also working so that's it for this video using props and passing props down from parent component the parent component would be app and it's passing props down to component one um before we leave let's also pass down a component to header and see how that works so we can go const um let's just go greeting equals hello everyone and let's save that and let's pass that to header greeting equals greeting save now these don't have to be the same as we we showed here set name equals set name one so i can go greeting five equals greeting but this greeting must be a variable defined somewhere here um i like to give it the same name if i can just for easier comprehension so if we save that if we go to header.js and we actually write something in here we can um write props dot greeting and save props dot greeting so whenever we want to use um jsx code we have to wrap it in these brackets and if we save and it doesn't look like it's showing up anywhere because grading should be lowercase not capital save there we go and a little bit of css text align center font size 50 pixels and color let's go yellow save and padding let's go margin margin actually no it's fine let's save and okay so that's it for this video about passing down props and using variables and stay tuned for the next video where we make more changes to this header and complete the website thank you for watching and please subscribe and like the video

Channel: Avoid Infinite Loops

Views: 8

Keywords:

Id: DCksj0pKZkM

Length: 21min 23sec (1283 seconds)

Published: Tue Sep 28 2021