Build React Apps | Create a Clock Timer Using React 05 | PART2|

Key Takeaways

hey guys I'm doing welcome to the part two on me heat a react crazy cool time using react of course so when we have stopped the last time is only gone through and we've stopped the start time of the stop timer and we've talked about how stage works a bit setting the state updating all of that and behind the scenes and you pretty much a serous Alzheimer it works you can stop at any specific y time and stuff but for now what we need is to use the capture time so whenever we click that we get some kind of list displays up in I don't know some kind of a left side or something that shows the time that we have captured without this time stop so of course and also we need to make the reset button work so we never click that everything goes to here to zero and we clear the timer interval and stuff like this so like just divert into this because this video tour is gonna be very simple and very very easy for you to understand since you we have gone through the basics things you know the last videos show you and everything have been set up correctly so now we're just gonna complain things and make the full time or think so here we need now to do the reset button since it's very simple so let's just go ahead back into our code and under the render and the render method us will see we have the reset so let me just add the UNK like events in here so on click and we can use this we're gonna call that on handle handle timer reset so Lisa I'm gonna bond obviously make sure to always bind this contacts into the specified hand we're gonna pass in to any events call back or handler so you have to any bit listener actually so make sure to do that same here let's try to the handle to find reset I'm doing it and obviously I don't know something okay let's just take that bit by the tab and you know the handle time we said what we need is to take everything in to zero so here for example that let's start with again and as concedes counting up so we all would say I don't know what started us on 0:07 when we click the reset what we want is to every single like ii give to zero minutes go to zero if there are any and ours of course go to zero so this is what we mean by a reset we set everything to 0 so he can stop looping back or stop the timer again over and over again so just start from scratch and like we set everything back to default so the default state so we can do is very basic so what we do is just go ahead and use the set state any of the set stage we're gonna call seconds so ii i'm gonna be like 0 minutes gonna be 0 and hours are going to also be 0 and obviously make sure to do a timer start it so Tiger started goes to full and timer stopped goes to troop so you know like we resetting means we have stopped the timer so the time I started goes to pull some timer start go to be true we're stopping the timer and seconds minutes and obviously hours gonna go to 0 and set the stage correctly right now also the other thing we need is to clear the energy bar so here if you can remember as we have cleared the interval with handle time timer stop so now we can do the same thing for this particular one little interval in here or usually you gotta take the interval and remember that we have stalled the interval into a fast stop timer so you can actually remember that we have story under here and yeah we everything now is good to go sure that we've set up the correct thing can be are pretty much good to go now control s all we need to save and refresh everything now we'll try to start the timer and just let it know it startles can see try to click reset and boom awesome everything is worth right now so everything gets reset to zero and the timer stopped immediately so so like we're not getting when we you set it's not going to automatically start counting up again so you're just gonna immediately stop after clicking the reset button like we have clicked the stop timer then click the reset timer bonnet but this is gonna do or the reset what I'm gonna do that actually for us automatically with no problem so it's gonna see stop the timer stop it with no problem and we set it into back like to the the base stage of the default state now we have the recess three piece signal let's go ahead and implement actually the capture time all you want is whenever like really let's say the timer is on or something oh-oh - like zero your hours here minutes and four seconds or six seconds we click the capture time and here we get a list like this plays the the timestamps that we have captured so let's say like going here to display 0:06 like captured OSX and something like that so all the timestamps whenever we click capture and this is gonna this is not going to stop actually it's gonna just keep counting up and up and whatever we click it just gonna just show something and just keep doing the job or keep counting up no problem with that so resets let me just go back and let's try to handle this up so hinder here is the the copter each I'm just gonna see into this button so what just go ahead and add I click here I need to also add the function or the handler for the click events so this I'm gonna call that handle and old timer capture gonna bind twine okay hello time handler timer counter actually and here we just gonna the callback you do the clasp on tanks and we are ready to go no one wants he is the away so if you can remember going back into the captures array this is the array into our state what we want is whenever we click that button we take the current time which is displayed over here we take that and just push it over into this array we push it to the cartridge array and then take this array and render it into the top like this this simple thing all we do to take it push it into here then window updates everything we render a filling the cobbler is into the Dom immediately to the left side over here and it's gonna get when do it successfully not just go ahead and use the push into the handle trauma contra so here we need to push this so we can say this boxset state as you know we said the state but this particular thing what we want is not a normal state so if you can remember that we can use for previous state using react says state callback so like we're not gonna pass here an object instead of not gonna pass in a callback so let's call back gun takes and also our first argument ask the previous state so professor Tatum just may give us the other callback and make sure to use rub this in through fantasies in order to pushing or put here like this is not a function of scope or a callback so this is an object scope which is the state object scope so those parentheses are going to be for the instance of the function scope or this callback scope as you can understand that here we need to push in the code the character so I'm gonna say captures equals an array obviously because an array and we're gonna take the current time II so the current the current minutes current seconds and currents hours of course so let me just go up when we try down pretty much up with here when we try to render thanks us consume for hours minutes and seconds and takes that and pretty much let's go ahead and do the the same thing whenever we try to push in here and we try to put it so this is not the way a wanting to be block okay let's see um I don't know how many let's just try to type it hours okay I'm gonna say this thoughts please the powers plus I'm just gonna pass in some point and also gonna say this day starts minutes I'm gonna just say one plus this state top seconds so this is pretty much what we need but if you couldn't Quanah think about this for a second what what what Charlotte is saying is the captures each time you're just gonna this is great so each time again equals a new array so whenever we put in or pressing the button or capture time or a time stamp or something like that or capture the current timer what it tells it it just gonna put in the two captures and you a brand new array it's not going to push the current hours minutes and seconds which is the time stamped into the captures which has the previous captured or there's none or something like that but you just gonna push that into the array not create a brand new brief that therefore actually not using the previous state so we can grab the previous captures using a previous state and just gonna say that you can't just equals the previous captures plus concatenated the new times temperatures yeah hours minutes and seconds so how we do that ESN provides us with a really really cool syntax is gonna help us a lot doing that we can do this in a more complicated way like all the ways JavaScript way but yes excellent tax thing will help you along with this so what you do you can say previous stage so here make sure to use a tolling or the brackets for the mineral and gray and you say previous state don't captures and I will you see here we have access my previous days as you know we say captures and for that to tell is like this is an array for the instance and this is an array so we can't put an array inside an array so this is no meaning insects what it tells us to do in order to concatenate this array and add or push this new volume into this particular terrain then make the captures the current state captures if you understand pretty much that what it tells us use three dots at the beginning and we're just gonna split valid like I don't know come or something as under normal thing so this imitate the array the previously terrain just cannot take the values all of the values that over here and just uh or push the new value with it and put it into the captures think so put it into the new time just right so the new stays captures when what I've got equals is the previous captures plus or pushing towards into like the new time step so this is what you're telling in here is in three dots you should to use mattes in order to tell me to tense the previous pushes or previous array teach all the values from it and Kim Katz means all the values also the new value all of them and just concatenate them each will bring it away and push it or say the characters gonna equals the dissimilar way so there's um pretty much gonna tell it to do so that's how we can grab the previous stage captures within and pushing in a new time step to it so this is the way that we cannot lose the previous stage or computers captures not actually we need to render the things now let's continue we are pushing the captures into the actual captures array every time we click on the captures but on a stop but after that we need to render it actually to the dog over here tree over here so we need to show it into the left side in your in a really nice way that we have a capture let's say like capture one equals this particular timestamp copter-2 equals this time step us on and so forth this is how we can show it in here in particular now let's go back under the on the render process solyndra process is down here and I've created the container in do he else can see there's your like cold give class name of the class name use a timer - capture so you can go the main style I have a ton of captures in here just like the Flex box design and just a column and it flexes talked for justifying the contents each of the left side and yeah this is all I'm doing so this is gonna be like the main container for our captures I'm just gonna put it in here and stop rendering so you need since you haven't arraigned here so counters is an array what you usually do is go ahead and loop through each item and that each item so if you are familiar with PHP or normal vanilla JavaScript this how things are actually being done but in this particular case for react is in Lord GSX it doesn't have like a full loop in here or a while loop or something like this so what can you use for this particular case is a map method a map function so this map is already like a predefined under any array so it's like a base method from JavaScript so all you do is make sure to use the curly braces that you're going to tell in fact we're gonna execute a GSX logic operation and here you give it already so car we say this top captures so this state the captures and we use the map method as it says so the map method what it takes us you'll see you a callback function so this callback function we're gonna use the ESX 0 function so just open up that and this is the basic thing so but in here the magic happens so another Korb and the arguments the the map method gonna pass in two arguments by default so the first one is going to be item into the capture so it's gonna loop each or through each item on this array and it is gonna bring us each item so each time there would be an item stored in this array so the first one's going to be item since you are gonna have time stamp so I'm just gonna call it time and the second arguments you're mining it or you might not it's an optional thing is the index so like when you run in a for loop or something you have the I index like stops from 0 and keep looping till like on a specific time or like specific an interval and stuff like that so this is the index each time just start from 0 and keep going up and up to the other length of the array so this how pretty much do the map works and here how you tell it to render stuff using the return so each time you're gonna return and branding your elements and we're gonna use in this particular case you can use a def in here to tell advance we're gonna like use and also make sure to I don't know JavaScript and react sounds like pretty much you for this moment sometimes just gonna get into JavaScript by default but always to make sure to use JavaScript we had not normal JavaScript to avoid problems so here we as I've said I'm gonna use a code so what's this code think as like a predefined thing so the code I'm just gonna give us some styling especially since we re using will show up in here so the code the code layout here gonna give us a really nice thing like I don't know magenta stuff or a magenta color or little nice without coupons so we can either turn into this time so as I've said this is like a free of charge you can use a dev in here you can use the P just gonna use it to style back a bit so code and I'm gonna just put the curly braces in order three things and it's just gonna give it a time so first let's say that this is gonna be a capture so capture and I'm gonna give it the index so it since the end X I'm gonna use index so the index plus one since the index starts from zero so you need to normalize it and make it starts from one and just going to concatenate things with each other and you're just gonna give it some space in or some someone enough some style or something like this so just two dashes and just gonna give it the index so you say capture I don't know someone or capture to capture three and the time or the time here it's not a timer at the time that's the capture is holding so yeah this is how all pretty much we need just using a map method will return each time in brand-new elements depending on how much captures they are and yeah here we go so here and like if you are wondering how this is like gonna be like updating each time whenever we click the button so when I'm gonna do click the handle time or capture bottom so each time we'll click that to the step state gonna set a new state new captures the state and pushing you on time step into the captures array that we have to then re render our components which means all of that is going to be rendered so that means it's going to be updated and the map gonna add a brick or a capture it's gonna add the new new element to us and just gonna return in UK so as simple as that this is how pretty much is going to work for us so we have control as saving everything and make sure just everything is looking pretty much fine let's just go back to the browser refresh and here let's try to stop the timer all right let's say on 5 and 5 seconds you're gonna click the capture time you click that and awesome here we go we get capture the number of capture we choose one and get our 5 now let's say 13 and 13 over here as I could see and so on and so forth he can capture how much ever and here's like some kind of a tiny problem here's kiss you in a bit like that this gets overflowed you can you can fix that you see some stalls you can take this as a challenge or something that's to make this time looks a little bit better if you do make sure make sure to let me know in the comments I'll be very happy to check your style is and and anything you have any features you can add to this time or that would be really good for you and as an other learning experience as well so actually those actually guys you can now reset you can stop the timer start the timer stop and so on and so forth so yep that was actually guys for this tutorial I will do hope you enjoy I enjoyed on this series and react making stuff if you have anything else make sure to let me know in the comments I'll be very happy to do more videos more practical examples like that and that would be really cool on this particular like react series so thanks for watching again I will catch you in the next video tutorial