Working with React Components Part 2 (P5D56) - Live Coding with Jesse

Key Takeaways

hey everybody welcome to live coding with jesse i'm jesse and today i'm streaming from home i had some issues with the quality but then i turned off spotify the uh the desktop player and that seemed to fix the issues but uh if you have any issues let me know i'll do what i can um see sorry i just i just saw the uh the quality drop so i was just making sure like all right what else can i shut down here let me shed some more tabs in uh in chrome i thought i shot all of them down but then i noticed that on one of my other screens i still had some of them up that i i really didn't need let's see all right it's pretty good now okay cool so if you weren't here yesterday i'm gonna just go over briefly what we did because we're just gonna continue on with uh what we started yesterday so this would probably be best if you can see the code or an example so i'm going to switch over so you can see the code and let's start with an example i think that'll be best for now so here in the side menu we have sections and you can drop down these sections and see you know these links underneath here what i'd like to do though is make it so that these links inside of a section could also be drop-downs and have their own sub-menu items so yesterday we did a few things but what we ended with was that we divided up these links into having the link on the left side and then we have the section over here on the right side when you click it right now nothing happens right so we we wanted to leave it so that this side could still be a link oops and then the other side i don't know why that's just close i guess i accidentally clicked on something so then the other side would be an icon to indicate that you can uh drop down and have some more um some more options so i've changed some of the get this out data here so i've added in let me make that bigger there's no way y'all can see that uh there we are you don't need that for right now okay so in our data and uh for those of you who are new you can check out all this code online the link to the github repo is in the description below this video so right now we're in drawer menu.js and we've added i've added these sub menu items if you remember yesterday we were just saying sub menu true if we wanted a sub menu now we have uh an array of objects that will have the text the link url and then the as url uh if this looks weird to you uh it is weird you don't normally have to include this but to keep the client side routing working like we want it to we have to add this in so now we actually have some data we can go back into our component and we can map over this data and try to put in some some links so let's do that now so we won't really need to come back to this data we're going to be in let's see where component is so we're going to be in the components folder and we're going to select drawer item dot js so if you would like to check out the code that's where it's going to be and so here's where where we're at if you remember from from yesterday actually let me start my pomodoro clock so we can get started on on some of this coding um yesterday we added in an option uh where we had our sub menu item so before we were just saying let's see if there are submenu items then we want to render this collapsible section and then within there we were mapping over all the sub menu items and that data came from you know this this page that we have open over here this file and then we were displaying all of those links but now we added in an alternative so if that particular item has submenu items so even more some another sub menu inside of the item that is the sub menu so uh i guess that's a bit confusing but essentially we're having like two levels of of links possible here then we we're going to add in if and yesterday all the further we got was we added in another section where an icon could live that would be clickable what we need to do today is actually make add in the icon make it clickable and then when it's clicked we want to be able to display a whole another collapsible section so it's it's gonna get a little bit tricky uh but i think i think we can get through it today in today's stream uh given you know maybe like two uh two pomodoro sessions um let's see sorry i just got uh messages from my work slack so i was just double checking to make sure it wasn't an emergency okay let's see so i guess first thing we should do then is just just go for the icon so first step is let's actually display an icon second step is set up a click handler for that and then after that we'll worry about displaying the sub menu items so here we're just we're saying submenu that's not what we want right we want this click so let's see how we're doing this here um okay so we already have these expand more expand last icons so let's grab this for now and we'll put it down here and let's see we want to say is sub all right this is looks weird but it's gonna say is sub sub menu open i mean i'm not sure how to say that but it is a sub menu inside a sub menu uh so let's make sure we add that to our uh you know what we're gonna have to go up are we gonna have to go up let me think let me think uh no we won't so i think we're we're handling we're handling a lot of these in [Music] in the parent component but i don't think we would need to i don't think we need to do that all right let me know if anybody uh thinks otherwise but i don't think there's any reason why we need to move this up to the parent component let's see do we need it no we don't uh i remember now why we end up moving that because on the click of a um of these links we wanted to be able to open up a section so we needed to handle that in a parent component so that uh basically we could change the state by clicking on something in this app bar component and then that state could be passed down so that's why we did it so we don't need to worry about that so let's add in uh some state actually we could probably copy a lot of what we did for the component uh for the other component in here so let's do that that was it for like i think we did this in layout uh so let's copy let's just copy all the state from layout for now and then we'll remove what we need to remove and emissions okay [Music] okay yeah this should work uh so first let's copy that actually oh i thought i could copy it all in one go but this is for the drawer so um let's go back okay so we don't need this drawer i don't know that we need this either let's see it says expand item we will need this so let's copy this and move to drawer item and right now i'm just copying as we go through i'll explain more of what these do uh because you know we we did this a long time ago so uh many of you have joined the stream you know even with the within the last month or so uh probably won't remember uh how we did this so essentially we are getting the previous state uh and we're changing it to uh basically like the opposite of the previous state for the draw item so if it that's all i mean it it may look like a little more than you'd need for that but that's essentially what we're doing is we're changing the uh um the draw item basically from like open to close right i mean really you know pretty simple so let's go see how do we pass this in yeah it's going to be a little it is going to be a bit simpler because you see here we passed in to draw this expand item and then in drawer let's see so i'm trying to find i'm just trying to take you through the flow of this and see where it it's at input all right so we're below this okay so here's where we have our drawer item okay and this is where we're passing down that expand item okay we're also passing down the state to say whether or not this is open so it's this props drawer item drawer items about okay and if you remember we actually we had in the state for uh the app bar or i'm sorry for the layout in state there was an option in state called drawer items and then about was inside that uh so we had that for you know for each one of these we actually hard-coded these in since there's so few of them okay if we get many more than this we'll probably just map over the data stored somewhere else to save some space i mean that that's just those ones alone are probably taking up a fourth of this component right now so we may end up doing that to save some space but not not for this stream right now okay and then finally when we get to draw item we can see that that expand item and is open is also getting passed down so we see is open determines which [Music] um sorry it determines uh which icon that's the word i was looking for is going to be displayed so in this case do we want submit some something okay i just broke it because i i was in the middle of changing this so we won't be able to see it yet so basically is like is the the little arrow pointing up or down right that's that's what this was will do and if let's see there are some menu items then we are going to actually add all this you know collapse stuff uh for the the list let's see and actually for this well there's so many items yeah for this one there are sub-menu items for everything which is why we didn't really bother to add an alternative because that top level always has it so that's but inside of here we need another option so inside of here we've essentially done the same thing we're checking for submenu items or i'm sorry we're checking for a submenu on the sub menu items but we're we're having two options okay so we've already moved this um expand more expand less down here and that's why we've created the is sub sub menu open that was a longer explanation that i anticipated but essentially like that's that's what we want so let's go with the state and say um okay yeah we're not gonna have we're actually not gonna need these right yeah we're i don't think we will need any drawer items essentially i don't want to hard code these there's going to be way too many so that's what i'm saying like we don't really need drawer items i will put in like hey we you know we do have this but right now there's nothing in it so then what will happen is uh this will get added in so we'll probably need to rework this a bit all right actually we'll see if this automatically adds it in because this is within says state that's the behavior that i want is to automatically add add that in uh i'm going to check my time okay 10 minutes all right so we should have time to get basically to see something uh also what did i want i i totally forgot to add is sub sub menu open so we're gonna need let me think actually we're gonna need to pass this down will need this whoops and i didn't get everything so we'll need that and let's put it here on the grid item itself to give a bigger uh click area so it's unclicked expand item item id let's make sure yeah there we go expand item item id and then what we'll want here is think we're we're not going to do is sub sub menu open what we'll do is um we'll say drawer and i can't remember what it was draw items um dots or will draw items and then we'll say item id draw items item id and then we're going to check to see no that's it we should be able to check to see drawer items item id uh so let's go up here where we have this props and let's also make const let's say draw items this state okay and what else do you want no that's it for now um also item id is not going to work for us because item id is being passed down so the item id in this case would um would be talking about this this kind of upper level yeah so let's see so drawer is passing down item id and then we're manually passing down the id of about so we're we're not going to do that what we need to do instead of item id is say and this is only in that that interior that sub sub menu instead of item id we need um let's see what we want to do let's check our data for a second to see i mean we could use i suppose we could we'll just use the text then the item id will be will be the text so we'll say item.txt okay all right whoops uh wow that was not what i wanted there we go okay so this will probably be enough yeah this should be enough to just see the menu items now and it should fix any errors that we have so i think and while that's loading i check my time okay about five minutes make sure it loads okay good it's a good sign everything's just so slow when i stream from home it's just the you know my macbook is much less powerful than my imac okay so let's go here see what we have yay check it out okay so we have let's see so this just want to make sure so it doesn't affect this at all so our state separate which is expected that's what we wanted to happen now we have this whoops you know what we're gonna have to do we we i believe we have it set to auto close when this is clicked on so we're gonna have to change that but other than that i mean this is work and the alignment's a little bit off but other than that this is working so far all right so that was you know basically phase one was get the icon there and have it only show up if there were sub menu items so now step two is basically make something happen when that's clicked on so we're gonna add a uh a click handler and right now actually let's we should check the state so we should have because we did put the click handler on there so we should have something happening with the state you know we're gonna have to take so we have a on click toggle drawer for for these list items and um we really don't want that so for every list everything in the list we're toggling the drawer so what we we don't want that um what we want instead we want to remove these toggles from list and we want to add these toggles down to um our our actual um our actual a tag so actually we do we have the toggle drawing on this a tag interesting i think i'm gonna add them i'm gonna i want to add them here to our link and we should be able to remove them from the a-tag so we shouldn't really need it anymore uh and but then when we have yeah so this should work so this is now on the link but not on our our toggle here but then on this link let's add it here but not on the a the a tag okay let's see how that how that goes so let's wait for the refresh maybe let's manually refresh this will probably be the last thing we do uh for this pomodoro session then we'll take a break and i'll answer some questions in the live chat okay academics okay and when i click this it should not close wonderful but when i click this it should close automatically automatically clicks okay so i guess i broke it all right let's see we have this going here let's check this one huh yeah i have broken that functionality so we're gonna fix that when i come back when we come back we'll do a break now uh for questions and let me scroll up um phoenix says uh sorry for not being here yesterday but as promised i'm here today uh awesome awesome it's good to have you here uh peter says haven't been able to uh to catch the stream in a while how y'all doing i'm doing okay it's good good to have you back freddy says buenos dias buenos dias bienvenidos all right freddy's just speaking spanish and i'm trying to translate but my spanish is not great inn is here hey anna how's it going brooks here hey i might have to use google translate here let me maybe even google translate on my other screen and then that way i'll know i'll know for sure what you're saying okay cool so this is um something is learned every day uh let's see i need you to translate the rest okay so looks like freddy's saying i'll see you later it's 1 30 in the afternoon yeah freddy i think we're in the tam same uh time zone here because that's what time it is over here let's see phoenix says by the way i built will be starting reaction just curious is you kind of a subset of react uh so no actually so vue is a totally different library than react so they the end result is usually the same you know you're going to build a web app but yeah if you would reactor are totally different projects sorry about the yawn um yeah so if um you know some concepts i'm sure will be the same between view and react i personally have not used you so i can't tell you for sure you know what the biggest differences are and similarities um but yeah you i mean if you know react you're not gonna automatically know view so they're not they're not that you know close together uh and it says any plans for tomorrow um what's tomorrow thursday i'll be in the office tomorrow because i have a meeting and i think that's it i don't have any anything else planned i'm just gonna meeting i'm hopefully gonna do a stream and uh just just work on this um work on this website some more and then of course hang out with my family afterwards but uh all right so that was good timing i got to the bottom of the chat and there we go john asks one more question i have a strange chrome problem only on my own create rex create react apps i can no longer edit any styles in the dev tools all of them are grayed out style editing works in firefox and edge anyone wow i have never heard of that happening so i mean if anyone just come across that issue please let us know in the chat or in the comments of this video but yeah i've never had that i had it i don't know why i would be doing that well actually i don't know what's going on today but we have a lot less viewers than normal which is actually cool it's kind of like more chill uh when when we do it like this i feel like i have kind of freedom to spend more time on each question and then talking to you all individually but yeah i wonder what hap what happened is anything else going on like live right now or i don't know usually when this happens it's because like notifications didn't go out to people so that's a possibility i think i did do a stream during like some big conference that was live streaming before and i didn't get a lot of people then oh ricardo says zuckerberg at congress yeah all right i didn't realize that was still going on uh right now so if that's the case that that probably explains it i'm gonna go with that and not like nobody wants to watch my show so if they pick mark zuckerberg over me then i'll i'll understand that that's acceptable all right so started the next pomodoro timer will do one more and um i have just broken something that was working on this component so we did have it automatically shut the drawer when you clicked on one of these links now it's not working so let's figure out why it broke and try to get that that working and then we can move on you know to the to the next part okay so what i did was i removed actually this is interesting maybe let's see so obviously this does not work on the link tag itself maybe it it should be on the a tag which we removed it from the a tag oops yeah there we go okay so maybe it should be on the a tag and so we're going to put it back on the a tag and for this one and we're going to do the same thing here for this a tag and we're going to go ahead and remove it from these links since obviously it's not working on those links those link tags now we also removed it from the list i hope that it's not necessary to have it there we'll see i'm going to refresh so it will auto refresh eventually it's supposed to but everything's running so slowly i'm just going to refresh myself the thing that i don't really i i really like my my macbook pro but one of the things i don't like is uh the inability to upgrade it um you know very very much beyond what you get so um it would be nice if i could just keep this same macbook and then add more to it you know but uh at least the last time i checked i didn't think that was it was possible to do okay uh it's still not working hmm all right that's too bad all right so let's let's look a little deeper and see if we can figure out why it's not working all right so on click you want to toggle drawer why would it be working only sometimes oh well maybe we need to move it further up then uh let's take it from here and let's move it up to our grid item and see if that works uh i guess we could do the same here oops no i guess we can't do the same here because we have [Music] we don't have a grid do we have the link oh that's right yeah we didn't make these a grid item all right well let's just test it out i'm i'm not really hopeful that this will work hey all right so that worked for this one so when we click undergraduate great that worked but when we click graduate that didn't work so let's you know what let's move this back here let's move this back onto the link and double check to make sure that was not working and if we need to we can just wrap this in a div and then that may work all right so we'll wrap it in a div and then put the on click and on key down into the div we'll see ricardus is also champions league corner finals live oh well i mean i'm i'm up against mark zuckerberg congress and champions league so i mean i'd say i'm doing pretty pretty good with the 17 viewers that are here right now so for those of you that are watching thank you very much for choosing me over all that other stuff all right let's see can i shut nope all right let's make a div let's get rid of this let's make it add this in the dive save that refresh yes okay here we are that works let me click on another link there to make sure that um we're actually getting like the link part of it's actually working still okay and it is so the on click on that div to do the drawer works and then the um the actual link works wonderful all right great so now uh so we have the two separate areas a click on the link part closes the drawer and the link works but a click on the icon part does not close the drawer and it does not cause a a change in the page great so that's what we want so now what we do need here is click this expand item item text okay let's um we were gonna check to see what's going on with state so let's go into react it will open this up and this either one of these will work um actually this is just like nothing's working it's so slow uh let me refresh if i get it working again all right you know what let's just do it this way oh you know what i bet i'm calling this all right so let's say uh expand sub item and let's change this to expand sub item and i'm not saying my goodness this thought uh i made so many mistakes in here what is how did how did i not see all that was wrong with that when i first copied it over all right anyway let's see what what this gives us and it doesn't matter about dev tools over here let's just close that hmm okay not doing anything for there let's see um drawer items okay we're calling this we're just gonna console.log some stuff uh so since uh our react dev tools are not doing anything let's just use old-fashioned console logs let's make that a bit bigger actually waiting for this to load it's still spinning i think it hasn't loaded yet yeah this definitely hasn't loaded yet oh lots of stuff happening here he's shot right here okay okay i will fix this in a second let's see what we're getting in the console here let's just get rid of all this stuff okay okay so this is changing it's adding academically excellent true or false there we are okay so we are getting a change now uh i believe it's just the extreme lag for me trying to stream and you know run obs so there we are that is working just like we wanted to let's make sure it works uh with this other one as well independently yep it does work oh on a second no that's not the behavior that i really want all right let's go back and check see what what should be happening here is it it shouldn't be overwriting completely the previous the state here so it should keep whatever we set for uh the drawer items so what should happen is that everything that was there should be combined with this new this new state just for that particular item um i don't know what i'm doing wrong i mean obviously it's working um but let's see the problem all right so set that to open i guess it still works all right um yeah i'm not gonna worry about that i'm gonna leave the console log in to remind myself uh that it's not working exactly as i want so from a user perspective it is working but i would rather have that stay saved so but for now uh we have it working enough that we can add in this collapse so let's do this let's add in this collapse and the list into here so what we'll have let's see where we have that list all right so our list item is within there we don't want that all right so we're putting this after the list time okay so essentially we can put this after our link and it should still work no do we want it after the crib hmm i guess i'll just try it i'm not sure where this is gonna work the best i guess after this and then we need we need to close out this collapse okay and then within there we're gonna put these uh so we'll have links actually let's copy the links as we have them here okay since that's that's really how we we need them okay so within that oh shoot let's stop that for a second uh so let's see there we are so we need to map over these things first right so let's do um item dot sub menu uh dot map yeah that's how we're gonna do it okay uh so then we'll do sub item and then we can return this right yes but we need to change everywhere that says item we need to change to sub item there we go see why it's still giving me missing key prop okay missing key props let's see um oh because i move the key i just i need to move the key onto the div there we are and then i need to do that down here as well whoops let's move the key onto the div so when you are putting when you're mapping over something and you're inserting multiple elements uh with react they each need to have a unique key so that's that's why we're getting that error and we're also getting that same error in the console a few minutes ago and uh let's fix it up here as well so we have our key here on the link but really we should now put it here on our grid item since that's the um outermost uh item no actually it's not our outermost item is the entire grid the grid container so that's where we're gonna put it for that uh and my timer just went off so hopefully this works let's give it a refresh see if it works if it does work then that's great then we accomplished what we needed to there's still the issue of the alignment of those icons but other than that if this works uh we should be should be good should be mission accomplished for today nope submenu map is not a function i item that's something you know not all right let's see what we have going on here i believe that we did have sub menu items okay no no okay item dot sub menu yes so if item. oh i know i know what the problem is we still have that [Music] sub menu set to true at the top here so the the data type that it's expecting is an array but we were giving it a boolean so um that's why we had the error so let's try that again okay so i'm looking while this is loading i'm checking the live chat uh we were talking about how it's a lower than normal turnout for today's stream uh and um so number one there's there's several live events happening right now that could be that could be it uh phoenix also said you know a lot of people were here for this um for the css um continuously for act as in css okay so i think it's because not a lot of them have been here continuously for react as in css it was standalone so yeah maybe the few times that we did just css stuff that was pretty easy to understand stand alone so that that does make sense i did get very like above average turnout for that okay let's try it oh i know i know what i messed up uh [Music] okay when you're copying and pasting things it's it seems like it's easier to forget uh what you need to change so this collapse i'm trying to say like uh in is open and that's there is no is open now for this right um so let's see uh component li so instead of is open we instead want we want to use drawer items and then um what were we calling that oops no no no i'm editing the wrong one okay uh let's get down here to the right one [Music] there we are so we need drawer items and then item dot text okay so this will look in state for the drawer items and then it will find the value of the drawer item that has a key of this particular item in that list okay one more refresh if this doesn't work uh i am i'm just gonna go back to the questions because i think i'm out of ideas and so i'll have to look up some stuff carlos said didn't remember about the champions league see you later jesse of course uh you're just kidding so all right let's give it a try now yay all right cool it works awesome um i don't think any of these links actually work yet i could try it but i think it's going to take us to a page that doesn't work okay but it was cool it actually did uh shut the drawer which is what we wanted so even though the page does not work yet that's still still very cool awesome all right cool so that works so uh basically the only thing that needs to be done for this to be completely finished uh would be just some some alignment thing so uh right now i would want this and you could probably see it better like this so right now it's this is aligned to the top of the container i'd want it to the middle so it lines up with this text and then once we open up these submenu items you can see the indentation is all wrong it's actually at the same level as the the top level list items we would want it to be and then at another level and potentially even have a lower font weight so that'll need to be fixed uh while we're doing that probably what i'll end up doing is bumping these back even further to make space for this other level so essentially the third level which are these ones will end up being at this point and then this will bump back this will bump back and then that way you'll have you'll have this so it should make space for everything uh like that and so that's uh excuse me so i'll work on that and then in terms of the data i will need to go through now and add in sections to the data uh so that we have all those submenus uh where we need them all right so there's only a few more comments in the uh in the chat so if you have a question go ahead and put it in there now but i'm just going to go through these last few comments and um and then we're going to finish up the stream and john says console log is a game saver for me even in react yeah for sure i mean i occasionally i'll see like a tweet or an article saying that you you should never use console log and i don't know i mean to me sometimes a really simple debugging issue just it makes sense to use something really simple uh maybe if i knew more about the other ways to debug maybe it would be easier for me but you know throwing in a console log is just it's so easy and i'm so used to it you know it definitely you know i would need a good reason to use something else and it works uh nikki says uh find myself also console logging all the time the chrome debugger and vs code is so powerful though i haven't learned to use it yet yeah same with me i just there's there's so much in um visual studio code that i i don't know how to use i'm learning new stuff about it all the time mainly from you all uh phoenix says hey jesse what exactly does yarn do also do you know any package that gives me terminal functionality within sublime text just like we can see in visual studio code here um i don't know of any packages for sublime because i've never used sublime text so i have no idea if anybody uses sublime and knows of a package that will allow you to use an integrated terminal uh please uh let us know in the chat or in the comments uh and then in terms of yarn yarn does exactly the same thing that npm does uh when it first came out it was claimed that it could do at least two things better than npm one it was faster and two it came with this lock file um that kept all the essentially it it's um gave you greater control over like exactly what um what was going on with all your your packages right so they would um you would save your log file to your github repo and then everybody else would use that same log file so now npm also has its own lock file and it is faster as well so i don't know if yarn has any advantages now or not over npm i just got used to using it after shortly after it came out and so that's why i still use it albert says can you make a react redux and firebase website portfolio when you're finished with this series uh this one is a bit too much for me uh usually so albert usually what i do is whatever i have to do for my job so uh we'll see we'll see what comes up next i imagine whatever i do next is probably going to be less uh difficult than what i'm doing now because they're just smaller sites so we'll see sorry um yeah i'm not 100 sure what my next project is going to be but i think it will be less involved nikki says uh should also make the drawer bigger on desktop yeah i can definitely do that i hadn't thought about that before but that's that's a possibility um john says it's true nikki at larger media with a percentage can work better than a set pixel width okay cool yeah i would i think i'd like to use a percentage with a max width so i would never want if somebody's using an extra wide screen i would never want the sidebar to be like really really big so maybe i can combine uh some media queries with a percentage with and a max width so like i never want it to be larger than like let's say 400 pixels wide um and then percentage-wise as well i would never wanted to take up more than let's say i don't know eighty percent of the screen yeah something like that which i mean it's pretty crazy that it would take up 80 but still like i think so maybe uh actually i could see a case for a min a max and min with off to think about it but that is a good point so i mean essentially like i'd never want it to be below 300 pixels and probably not above 400 pixels and then on a desktop i mean it could reasonably take up 20 percent of the screen at least and be okay mobile's tricky i liked actually i could probably use a percentage on mobile and that would be okay so like i'd never wanted to take up more than 80 percent of the screen um with the minimum being at 300 yeah it's the smallest phone screen with is 320 pixels i think yeah anyway i'll um i'll have to test it out and think more about that uh in pixels so i mean for now that'll probably be something that it's like if i can get to it i will but it's not necessary before launch because it works as it is all right cool phoenix says it's just like buttons we don't want them to get squeezed nor blowed up yeah exactly yeah that's exactly the case it'll look it there has to be this medium thing it'll look terrible if it's squeezed together and it'll look terrible if it's too big so uh we just gotta find the right the right range that's acceptable okay all right well i think i'm gonna finish up with the stream now uh so i've got through the live chat thank you all so much for watching and for choosing me over mark zuckerberg and uh champions league really appreciate that um i should be back tomorrow i'll be in the office tomorrow i do have a meeting in the morning i don't think i have any other meetings so i sh it should be good tomorrow for a stream and um i'm not exactly sure what we'll work on tomorrow so it'll be a surprise um yeah so have a wonderful day uh thank you all again for watching super helpful as always and i will be back tomorrow