Modern React Event Handling Using Hooks

Key Takeaways

hi and welcome to another JavaScript mastery video in this video we are going to build this little project I wouldn't even call it a project it is a special exercise I designed for learning hooks as well as managing inputs and button clicks we are going to handle these events in a hooks type of way so all of this is managed with hooks state as we type the username there as a JavaScript mastery for example you can see that we immediately printed out right there it's all using hooks and this inputs are managed using hooks as well so we have a state of username and then we have a set username method which actually updates that username down below we have a password we can do one two three one two three and you can see we immediately print it out right there but we do some special little logic to hide the password then we are dealing with a button event with a button click on which we handle there's another state with hooks and show the password so we can toggle it or untag alit that's it although it may seem easy and nothing special this is not a project or showcase this is a project that is really going to expand your knowledge of hooks and help you understand them in a useful and real life scenario we can start with an empty Visual Studio code window what you need to do next is create an empty folder and just drag and drop it right there I already did that in mind then you can go here on the top of the screen to the view and then finally to the terminal so that opens the terminal for us now we can see where we are we are currently in the react practice that's how I call the folder yours might have a different name what we can do next is initiate empty react application we can do that by running MPX create react app and then dot slash that slash means that it is going to create it inside of the current directory meaning react practice for me so we can click enter and wait a few moments now that that is done we can get started with our little project what I like to do with every single create react app location is completely delete the SRC folder and created from a ground up so I delete it and then we can create a new SRC this is easier because we don't need all of the files in there we only need an index that is as we always do we need an app that GS so after chess right there and her purposes of this video we are also going to need AB that's CSS for which I'm going to provide you the code it just for some simple styling the purpose of this video is really to focus on the actual hooks and using events let's start with our usual index that is in there we have imports react from react as we always do with react applications or files only in index is we still have the import react Dom from react - table and then we have import app from that slash app great and finally we need to have react Dom that render and in here we put the component that we want to render so this is the app component which doesn't exist yet but we are going to create it right now and the second parameter to the render method is the actual element so we are going to say document that get element by ID and in there we specify the route for beginners watching I don't want this should be mysterious where is this route what's happening right there so let's show it inside the public folder you have the index.html and if you go inside of there you have all of these little comments and disbands and multiple lines what I like to do is I like to tidy it up a bit so we can make this in one line remove the comments remove the spaces right there remove this no strip to remove this comment and finally take a look what are we left with this is something already familiar to you this is a basic HTML file and in the body it has only one thing a div with an ID of root that's exactly what our react application is hooking onto and that's where our all components lie right there inside of this div with an ID of fruit and we are targeting that right there and putting our app inside of that so let's go inside of our app inside of the app that yes we are going to create a basic functional component so we're going to say import react from react as well as the Const app and then an error function and in there of course we have a return which is just going to be ideal for now finally we are going to say export default and then app right there great that's awesome the only thing that we can do right now is we can import the app that CSS as well so we can say import that slash AB that CSS usually in more complex react applications you're going to want to have the components folder in the SRC and also you'll want to do the styling with modules but in this case we can just use simple AB degeus for everything since we don't have a lot of code and we can use this little import for an external stylesheet great what I'm going to do right now is I'm going to paste the CSS code inside of this app that CSS it's just a really really basic CSS we have some flexed containers jacket as you can see right there some styling for the input and some styling for the button that's absolutely it I know that many people don't feel like retyping the CSS so I'm going to leave this in the description and you can just copy and paste it but that's it so now this is just going to bring some styles in our application but again the focus of this video are hooks and events on the inputs and the button so let's go back and let's say test for now just so we can test it out what we can do right now is we can go ahead and say NPM start this is going to start our application and if we've done everything correctly we should see a div that says test and maybe some styling because we imported the Styles so let's see great as you can see right there our test is in here it's small but it is in the middle which means that the styles have been successfully imported now we can get to the US state hook the hook that we are going to explore in more detail in this video to use state inside the functional components like this one we need to use hooks more specifically we need to use a use state hook we can import it like this so we have react which is a default import and then we have a comma and then in between curly braces we have used state which is a named import that's it how does the use that hook work let's try to see it in action so what we do with you state is we say Const and then we do array the structuring inside of there we are going to have a name of the state it is going to be in this case username and the second thing in there is going to be a method that changes that username that changes that state field and we are going to call it set user name by convention we can put anything in here but then we can say set and then we need to specify the same thing that we have right there that's just a convention and then we say equal to use state which is a function and that function accepts one parameter and that parameter is the default value of this username so we can put an empty string at the beginning in here we can have an input it is going to be a self closing tag and we can expand it on multiple lines just so we can put some attributes right here the first attribute that the input needs is the type in here we just have some basic text we don't have to hide it we don't have to do anything special with it it's just going to be a type of text the second thing that you can specify is the placeholder placeholder is going to be the value that's going to be visible in the input so just it just lets the user know what the input is for so we can say user name or we can even say enter user name like that the third thing that we are going to need is going to be the value so the value of this input what value should it hold it can hold something that we specify right there something static so if we go back now you can see that we have tests right there but if you try typing you cannot do anything at the start the value of an input field should be empty right so if we set it to empty like this and we go back now if we try typing we cannot type again that's the issue we need to make it dynamic to update the value we need an unchanged handler so we can say unchanged right there and inside of the unchanged we have a callback function this function is going to run for each key press the thing that we get in here is the event event specifies the key press but how do we get the value of the key press let's first explore what the actual event is so we can say console.log and then we can say e if we save that and go ahead and take a look we can open the console by right clicking and clicking inspect and now let's open the console right there clean this and let's start typing so if you say test you can see we get nothing because we are not changing our value but do we get anything in here for each key press I got a synthetic event and that event has a lot of stuff in there it has a timestamp bubbles event face current target target type a lot of stuff the only thing that we are going to need is going to be target so you vent that target let's see what do we get back from that okay now if you type test we get this input you can see if you hover over it it highlights it so we get the input but how do we get the value from the input well we just say event that target that value and this is going to give us the current value that we type in so if you say a it's going to say a TST and we can say test right there that's it but now how do we update this and actually create a word from all of these letters and we need to combine them into one word so how do we do that we need to change the value of the input on each on change event call so how do we do that we specified that at the beginning the value of the username is going to be an empty string that is exactly what we have right now so that's fully okay we can just exchange the static value for our username that's coming from the state from the state using hooks of course great let's go back and see if anything changed okay we still do get the test but the value is not changing and that's because we are just counting this value we are never actually changing it now let's bring this into one line and delete this console.log now remember how we said that for each state using hooks there is a specific set up method so the only thing that we need to do to make this work is that we need to say set user name and inside of there as a parameter we need to pass the actual value and as you remember the value stored under event that target that value if we go back and take a look you can see but now we can actually type and the value is indeed stored in that username state for people who are new to react this may seem like okay this is a basic thing to do but for people who have been using class-based components to do this this is going to seem super cool it's it's actually crazy that we can do this with one line to initiate the state and then one line in here inside this input to change the value for that input with class-based components you have to have the whole class the constructor this state the handler methods for this own change handlers and so on and so on it's so much simpler having like this great now we learned how to use state inside of an input and also how to change it we can do one small thing right there since this is a function and we have only one thing inside of it we can just omit this braces we don't need them we can just have it like this it looks a bit cleaner great now let's do the same think very password so we can even copy this I'm copying this by holding alt or option + Shift and pressing the arrow down if you'd like me to create a video about all the visual studio code shortcuts there are many of them you can shift this line so you can copy lines you can edit multiple things like like this it's crazy there's so many things that you can do also indent like this so many things that you can do if you'd like me to create a video about all the keyboard shortcuts just let me know so now we can have a password right there and we can also say as you already learned set password and at the beginning we are also going to set it to an empty string we can also copy the input okay now that that is copied the only thing left to do is change this to enter password and change this to password and change this to set password let's see if that works okay now we do have two inputs and if you say test and we say 1 2 3 1 2 3 oh there is a problem our password should be hidden so how do we hide them well we just change the type of the input to password one more time test 1 2 3 1 2 3 now hidden great so what are we going to do with this state fields usually what you would like to do is you want to for example sign in a user for example imagine that this is a login form you would have to use these states to sign in the user or a registered user or send this data to the email and check whether the user exists so on and so on again this is just an educational video to teach you how to use all these different events state hooks and so on but the possibilities of these but the possibilities of this are endless for our purposes let's just show what we've written right there below the inputs that's it so below the input what we are going to do is we're going to create an h2 and in here we are going to have the user name just like this and we can create a new one for the password okay while we are at it I just forgot we need to add a class name to this div and the class name is going to say container that's just going to center everything great okay now that we are testing it out the first thing that we can do is we can say user name for example Java Script mastery and the password is one two three one two three let's say that we want to show as many star signs so this this thing right there if you can see it in the console as there are letters or numbers so if they are one two three one two three we would just want to show six stars we need to implement that somehow in here you are presented with a real world problem for example to hide this and now you need to figure out logic based on the oldest state that you have how to do it in this video we are going to do it together but again you can practice this on your own just think of something some functionality that you want to implement and then try to do it with logic and programming skills great let's put that button right there so one more time on the button click we want to show or hide the password so let's say show or hide password just like that great we have this button right there and the password that we are referring to is this one right there so that's the password that's the text that's coming from this state of course we need an onclicklistener the same thing that goes for the onchange it's absolutely the same in there we have a callback function that is being executed every time that the user clicks the button and the same as here we have the event this time it is going to be a click event so what do we want to do on the button click well we want to change this password from the but let's say plain text to star signs to hide it how would we do that well we would need another state field we would need a state field for example called show password so we're going to create it show password and then set show password with hooks as you can see right there we can have as many hooks as we would like so we can have one use state second use state and third and so on and so on in class based opponents you just have state as one big object and then you have to copy this that state that something does that stay that something else so on and so on in here we just have show password and set show password the same thing as for every other use state state so in here we can specify the value of show password that you want to have at the beginning at the beginning we are going to have it as true so at the beginning let's say that we want to show it again this can be true/false doesn't really matter right now so how do we change it in here we say set show password and then we can say true for example or we had true so let's say false to turn it off how can we toggle between the states so in here we have true how can we make it to false well we could just say false right but then it would never turn it to true again we want to have it to toggle so on off on off like a switch that's the job for the not operator so we can say not and then not what show password was before so currently show password is true so we can say not true which is going to be equal to false then the show password is going to be false and we are going to say not false which is going to be equal to true so we are toggling it now we are managing state of whether we are showing or hiding the password now we can do something about this now we have the access to that boolean to that to either true or false and based on that we can change this password for now let's say that if the show password is true then we display show else we display not show let's let's just have it like that simple so this is pseudocode we just say if something then something but this is not real JavaScript so let's convert it into real JavaScript for this ternary operator is the best we can use the if if statement right there but since we just have the if and the else ternary is a bit of a better option so let's have it right there we're going to delete this password for now and we are going to say so if the show password is true we say show password and then a question mark that's the syntax for D ternary operator and then the action if the show password is true that's the show else we say not show just like that if we go back to the browser we can say test and in here we can say one two three one two three now if you click on the button you can see that it actually toggles but it's not displaying our real password so now we need to fix that let's say if it is showing show as the real password so we are going to say password right there let's see what happens now test one two three one two three okay it is being displayed and not shown great but we mentioned that we don't want to do just not shown or show we just want to have as many star signs as their characters so now this is where I would like to stop you a bit and you can pause the video and try to find the solution your own so let me specify what do you need to do so if these show password is true display the password else show the asterisk sign as many times as there are letters in the password okay so this is the exercise you can stop the video and try solving it yourself okay whether you stop the video or you didn't we can now move on so let me show you how to do it there are many different approaches for solutions like this programming is really special because everything in programming has many solutions the solution I thought of and that they find really concise is just to use the string that repeat so this is our string right just the asterisk and we want to say that repeat which is going to repeat it a number of times and how do we get the number of letters in the password well we just do password that length that's it this is going to repeat the asterisk as many times as there are characters in a password great that's it let's go back and check it out so now if we say for example JavaScript mastery and if you try typing one two three one two three that's never a good idea don't have passwords like this and then you can click show and hide password and you can see it actually shows it and hides it but it hides it what six of this asterisk signs right there again nothing special nothing flashy but we are here to learn about the state and how the events work that's great I have another little exercise for you depending whether this show password is stalled on or off don't just show and hide this thing right here but also with it show and hide the password in the input as well you can again pause the video and try solving it on your own if not I'll be back in about two seconds to solve it you can let me know how to that go in the comments and generally in the comments you can request for the video ideas give the feedback on this video let me know what's good what we could do better should I speed up the pace of teaching or should I slow it down a bit should I do more complex videos should I do more complex videos or the easier ones ok now that that is out of the way let's actually solve this so the only thing that we needed to do is to change this password from the type password to type text and we need to do that depending on the show password so we are going to say this curly brace is to show that we are dealing with JavaScript logic right there and then we can do another ternary if show password is true then we want to say text because it shouldn't be hidden else we are going to say password because that's what hides it password great let's go ahead and take a look JavaScript mastery one two three one two three it's shown if you click show or hide it actually doubles it in both cases awesome thank you so much for watching if this video was helpful feel free to smash that subscribe and like button and also let me know what you would like to see in the next one