React JS Interview Questions ( OTP Login ) - Frontend Machine Coding Interview Experience

so over here I've opened an Ott platform called Disney plus hotstar and if I go on over here and click on login it's going to ask us our mobile number to log in so let me just enter some random mobile number this is not my mobile number by the way so let's click on get OTP and notice we get a UI like this with four different input Fields over here for entering our OTP so if we go on and enter something if you let's say press six notice it automatically moved on to the next input field how do we do that and let's say if we have entered our complete OTP and if we press backspace you see it goes back to the previous input field and this might look simple but there are a lot of validation and logic that goes on into this like for example if we are on this input field if you press over here you see the input cursor goes back to the front so that if you type something let's say two it has updated it and moved on to the next input field and you might have seen similar uis in other popular websites as well and that is why this is such such an important interview question so let's see how you can go on and implement it into your own website but before we do that hit that subscribe button right now if you want to see more such videos like this because you won't find content like this anywhere else on YouTube so I've opened vs code over here and let's initialize a new react app so as you can already see I've created a folder for this OTP login in my vs code and inside of it I'm going to say npm create wheat at latest now wheat is just like create react app it initializes a new react app for us inside of this OTP login folder and yep you see it's asking us the name of the project if you give this the name it's going to create another folder inside of this OTP login but we want our code to be inside of this folder only so I'm going to say dot now it's going to ask us the framework I'm going to choose react with JavaScript and yep you can see we have initialized a new react app over here let's get rid of this assets folder we're not going to need that let's get rid inside of uh this all the code that's inside of this app.jsx I'm going to get rid of this div actually I'll make a d over here and just say hello let's get rid of all the Styles inside of this index. CSS app. CSS and cool we're good to go and also let's install all of the dependencies so I'm going to say npm install which is going to install all of the dependencies inside of this package.json and here we go our dependencies have installed inside of this node bondes folder over here let's try to run our app so npm run Dev and you see it has instantly fired our server off if you click on this link our app is opened here with the Hello message nice so inside of this div I'm going to say login with phone and let's give this a class name of app and give this app some styles insert our app. CSS simple Styles like font family of sans siif and text align to Center yep cool now I'm going to create a component over here called phone OTP login and this will contain whole of our UI also uh let's wrap this login with phone inside of an H1 it's like that and obviously this phone OTP login doesn't exist yet so I'm going to go on over here and say right click components and let's get a component over here for our phone login. jsx let's initialize a new react component boiler plate so I'm going to say r a fce press enter and you see we got a new boiler plate phone OTP form I think it's better if we call it phone OTP form so yeah that's better let's import it just like that and if you don't know how I did that rafc thing there's this extension over here called es7 plus react Redux react snipper so you can you know install this extension and you can also do that let's get of gets rid of this and if we go back to our app yep you see login with phone and phone ntp form our component is created now inside of this component I'm going to have two things one is the input field which where we will enter our phone number and when we have entered our phone number it will be replaced by the OTP form that we saw in the Disney plus hotstar website ins start this St I'm going to have a form component it's not going to have any action but it's going to have an on submit which I'm going to keep empty for now and inside this form I'm going to have an input now this input will be of type text if you want you can keep it as type number as well but I'm keeping type text because I'm going to apply additional validation over here so that we can tell user that if they have entered any alphabet inside of it that this is not a valid phone number value which is going to have our phone number so let's create a state over here use State and use State hook inside of our react app is used for managing the state of our app so this gives us two things one is a variable let's say if I call it phone number and the second thing is going to be set phone number which is a set function which is used for setting or changing the value of this phone number State and by default I'm going to keep it to empty so let's give this value a default value of phone number also we have to import use state from react and on change on change I'm going to call a function called handle phone number which doesn't exist yet so let's go on and create it right below this const handle phone number let's have a placeholder text called enter phone oops phone number let's see how does it look like okay this is a simple input field nice and below this I'm going to have a button which is going to be of type submit so when we press on this button this on submit will get fired off so yep nice for this on submit I'm going to have another function called handle phone submit let's just give this over here cool then so first of all Let's uh handle our state of setting the phone number when we type something inside this input field because right now if you see we're not able to type anything even if we type it in our keyboard so let's take an event over here and here I'm going to say set phone number to event. target. value now if I go on over here and type something I can type it whatever I like when I type something and press submit you going to see it refreshes the page that is it's doing its default behavior of refreshing the page so we have to prevent that default variable so inside this handle phone submit I'm going to take an event and say event dot prevent default and now if I type something and press submit it's not going to uh do its default behavior of refreshing the page and over here I'm going to perform some phone validations validations oops what am I typing over here I'm going to validate if our phone number is legit or not I mean phone number format is legit or not I'm I'm not going to add a lot of things over here first of all I'm just going to say check if our phone number only contains number and if it's more than 10 digit so this just to show you that you can add validations over here so you can add whatever validations you like if you want I can create a SE completely separate video on form validations and all of these things so I'm going to take a re X variable inside of it I'm going to say to slash and inside of the bracket I'm going to say this should only contain values from 0 to 9 and now you might be thinking how am I going to know how to write this Rex trust me you don't even the senior developers don't understand what Rex is all we do is we go to Google and type give me the rejects for identifying numbers and we just copy and paste it right so don't uh hurt your head trying to understand what Rex is over here it's just a form of validation basically and now below this I'm going to say if phone number dot length is less than 10 or if reject DOT test that is if our phone number is not a complete number that is it has something other than the numbers right if if any of these conditions satisfy I'm going to say say alert invalid phone number and return it else I will simply say show our OTP field if our number is valid then I'm going to show our OTP field but before that we are going to call the backend API just so that we can send the OTP to the user so if you have any backend API you can integrate that over here and after that if it has been sent successfully I'm going to say show OTP field so let me just create a state over here real quick use State show ootp input by default it will be false but if all of this is done I'm going to say set show OTP field to True great so okay we haven't created our OTP field yet right so what I'll simply do why have I open this over here okay so what I'll simply do is I'll wrap this whole form over here and I'll say if show OTP input is not true then just show this else I'll go down over here else show this div which will have the UI of our OTP input so here simply I'll just add a paragraph first which will say enter OTP sent to whatever the phone number is so phone number is inside this phone number date so okay let's see if we go on over here let's type some random number click on submit yep you see enter OTP sent to this and below this I'm going to have our OTP UI or the OTP input so for that I'm going to create a component over here called OTP oops OTP input and now this is going to take two things so I'll try to make this a scalable component what are all the things that this is going to take first of all this should take a length variable that is how many input field do we actually need inside of this OTP like for example in the hotstar website you saw that there were four field but in a lot of websites there are six fields or you know five Fields so we can enter four over here and this will show those many input Fields accordingly and after this is done we are also going to submit right so I'm going to say on OTP submit I'm going to have an external function called over here on OTP submit so this on OTP submit function is what is going to be created over here which will be taking our actual OTP and let's just do console log for now I'm going to say login successful with that OTP so this component is going to provide us with this on OTP submit function and obviously this OTP input component is not created over here so let's go on and create this OTP input component but before that if you're preparing for your front end interview and you would like me to help you in your frontend interview preparation just click the link in the description down below and book a one-on-one call with me we're going to discuss tips tricks I'm going to give you a lot of resources I'm going to design a proper road map tailor to your situation which is going to help you out a lot in your frontend interview preparation so click the link in the description down below and book a one onone call with me so I'm going to go on over here and create a new file OTP input. jsx I'll create a new component ra fce OTP input and save the this let's go back and import this component just like that let's see if we go on over here enter some random phone number press enter yep you see we get OTP input component right over here okay let's make this a little bit bigger okay so instead of our OTP input it's going to take two things that we already saw one is going to be the length and the other thing is going to be the on OTP submit function now let's give them a default value for example for for length I'll just say four by default and this is going to be an empty function by default and first of all over here I'll just create a state real quick so use state is going to be used for our OTP for storing our OTP so I'll say OTP set OTP let's import you state and by default I'm going to have the default value of new array of this much length dot fill with four empty Fields so let's go on and see if we do console log and say OTP let's see what do we get in the console if you say inspect and the console oh we have to enter the phone number press submit yep you see we get an array with four empty spaces four elements with empty value so that this this is the place where we will fill our OTP and over here I'm going to create an input field and actually not one input Field Four input Fields whatever this length is so I'll say I'll take this OTP inside of this curly braces OTP do map let's take the value and index inside of this I'm going to have the input field so we supposed to do return and inside of it first of all let's give this the key is going to be our index type of this is going to be the text value I'll keep as whatever the value is inside the current input so value right now it's going to be empty obviously and I'll have an on change function what happens when we change it so let's just keep it empty for now or maybe I can just um call it Con handle change and just use this handle change over here and I'm going to provide it with an index that is this index and the event that we will use to extract the value so event comes from here and I'll tell you why I've used this input and event over here in just a second let me just write out the other props one of the other props is going to be on click so if you remember I showed you when we clicked on any of these uh OTP Fields what happened was the cursor moved to the last position so we're going to take care of that and we're going to take a couple of more validations I'll show you so uh instead of handle change they should be called handle click and this one I'll send just the index then there's going to be on key down now what will this handle so basically when we press some key inside of this input field obviously that will put in the value but over here we will decide if let's say if I press on backspace it should go to the previous input field right let's just call it um handle key down and I'll send the index and the event and then at the last I'm going to have a class name of OTP input okay we've created a bunch of functions and given it a bunch of props over here let's see how we can make it functional so first of all let's see how does it look okay it looks very ugly right now it's just uh grade of four input fields we don't want that let's go and first style this out so this OTP input I'm going to go to my app.css I'll say do OTP input inside this I'm going to have a width of 40 pixels let's just uh open it on the side so that you can also see so width 40 pixels and height is going to be 40 pixels I'm going to make it a square margin of 5 pixels around them text align to Center and font size is going to be 1.2 em and EM over here is obviously as you know is a relative size so yeah you see it looks much much better over here but if we type anything it's not going to take anything right now because we are not updating our set OTP state right so let's go back to our OTP input and first of all first thing first that we want to take care of is our user experience so if you notice if we refresh this and enter any phone number over here and press submit you see it didn't Focus directly onto this OTP input field as a user I don't want to go and click on this input field and then type my OTP right I don't want that what I simply want it that it should be already in Focus so that if I type I can log in as soon as possible so for that I'm going to create a USF hook over over here to create a reference to that particular input field so I'll say const input refs and this is going to be an array by default because we're going to have the reference to all of these input Fields that's why I'm making this an array so how do I make do that so if I go on over here let's say ref equals and inside of it I'm going to take a call back which will say input and here I'll say input riffs dot current of the current index is equal to the input so what this will do is let's see if I just um go on over here instead of this OTP I'm going to put uh input refs here and let's see the inspect if I make it full screen I think that's better now if I enter some random phone number press enter let's go to the console and you see we get the object with an array of four different input field if we hover on them you can see it's the to the first second third and fourth it provides us the reference to that exact jsx element okay now I'll have a use effect that is whenever a component is rendered this use effect will be called because I'm going to make it empty over here so simply I'll say if input refs dot current oops current of zerth index if it has something then I'll say input refs do current of zeroth index do Focus now we're going to focus as soon as we load this component so let's see if we refresh this let's enter some random phone number press enter yep you see we already have the focus to the very first input field so these small small things are very very important in your interviews and as well as in your day-to-day work as well so you should pay attention to all of these things and this comes under part of our front end system design as well all of this user interface user experience stuff now let's go on and update our OTP by using set OTP so inside of this handle change we're taking two things right first one is our index second is our event so let's take both of these over here and inside of this first of all I'll extract that particular value so const value equals e. target. value and I need to make sure that this whatever I've entered over here is a number and not an alphabet or whatever right so I'm going to say say if is not a number value so if value is not a number I'm not going to do anything I'm just going to say return but if it is a number I'm going to say const new OTP and I'll take whatever is already inside of this OTP over here so let's create a copy and here simply I'll add a validation to allow whoops allow only one input because user can enter more than one inputs over here right so I want to say new OTP of index so whatever the current index is so that is why I've sent this Index right so right now our focus is updating only that particular input field so that's why new OTP of index is equals to Value the value that is inside of that input dot sub string and we're only going to take one right so I'm going to say value dot length so whatever the length of it it is I'll just take the last element and I'll tell you why I'm doing it over here so let's suppose we have already have some number over here right and if you notice inside the hot star when we clicked on an OTP field it put the cursor at the very end it's because when we enter any new number it can take the very latest number from that input field so that is what we are also going to do notice so okay we did that and after this I'm going to say set OTP to this new OTP so let's go on and see if we enter 3 k 4 1 so when we press on over here it should already automatically move on to the end we we're going to add that in just a second but notice let's say if we are already over here and we press five so it took five and got rid of three because right now the number was 35 and because of this line substring value length minus one value do length minus one it got rid of three and just took the very last everything starting from value. length and after value do length there is just nothing right there just one character that is the last character over here if you want to understand more about this substring and all of this uh functions in JavaScript I've created a complete video on strings so after you're done watching this video you can go on and watch that video as well okay so after we have entered all of our otps I mean all of the input inside of our OTP let's say three 5 and one right after all of this is done what I want to do I want to trigger a function and that function is going to be this on OTP submit so over here I'm going to say submit trigger I'll add the code for that over here so I'll say const combined OTP equals new OTP dot join and I'll join them by the empty string so you might some of you might have a question why are we not using this set OTP or this OTP State why are you using this new OTP it's because this set OTP function over here is asynchronous now this is a very important interview question as well so pay attention the set OTP or the setter used State action is asynchronous so we don't have the updated value of this OTP at this point so if you use that it's just going to give you the old value so it's better to use newp and sometimes a lot of us in interviews and in real world as well make this mistake and then we you know scratch our heads why this is not working so that's the reason why so you should use this new OTP if you have any doubts you can just console log over here new OTP and OTP you will know that this is not been updated at this point so okay we are joining this and now we have the joined OTP without any you know array format so let me show you if I say log and I say combined OTP and before that I say new OTP I'll show you both of these things so let's let's just get rid of let me just get rid of this console log this is bothering me if I change it to Let's something four so you see our new OTP was this and our combined OTP was this which is what we are going to send to the back end right for processing so simply I'm going to take that on OTP submit function over here where it go and replace this and inside of this I'm just going to send my combined OTP so that we can receive it over here on TP submit and show login successful so I'll again show you let's just start from the scratch so if I enter some phone number invalid phone number let's enter more yeah if I say 2 3 three oh it's giving us login successful every single time why is that oh my bad I haven't checked uh the length has to be four of this combined OTP so good thing that we saw this that is why it's very important to keep you know checking if your app is getting built fine so I'll say combined OTP do length is equals to the length that is being provided over here so if that's the case only then we will do on OTP submit so all right let's see let's start from the beginning I'll enter some phone number submit if I say two three oh four I mean one and now if I press seven you see login successful with our OTP and we can provide the input logic over here with this OTP as well cool then um this is done now let's discuss the elephant in the room which is we have to click all of these separately to remove and add as well right so we don't want that what do we want when we click on it it should move on to the next input field we don't have to use our cursor to click on it so okay move next is it's very important to write these comments while you're coding something it helps upcoming developers as well to understand your code so it's a good practice so I'll say if value is there that is we have something inside of the input field if value is there and the index is less than length minus one so what do I mean by that that is we are not in this field right over here if we are up until here only then we're going to move forward right if we are here then there's nothing to move forward so that's what I'm checking if index is less than length minus one and oops and input refs of I mean Dot current of index + 1 so here I'm simply checking if the current index + 1 is something up so this is just giving us error because of this yeah so here simply I'm checking if I have entered something over here there should be something after it as well right so I've added two validations this validation and this validation so there should be something after it only then we're going to move forward then simply we're going to do input refs do current and same index + one if we have the reference to that I'm just going to say Focus that is all let's try this out so if we refresh this again and enter some random number submit and now was the magic 6 9 4 2 yeah you see it's such a good user experience when you can just enter on an input field and it moves automatically to the next input field and this is one of the main features of this TP field over here that it automatically moves on to the next one and if we click on backspace no it's not moving to the previous one automatically so we have to handle that one as well so I'm going to go to handle key down and it's again taking index and the event inside of it I'm going to first of all check if event. key is equals to backspace so when we press on backspace it should go the previous field right so first of all I need to check if it's a backspace key pressed and the next condition will be I have to check if the OTP of input doesn't exist so it's empty so I mean not input it should be index I mean that is we have removed everything from it and index is more than zero so if you remember for this last we added a validation that if we're on the last then we're not going to move to the next right so if we are over here we're not going to move to the previous one because there is nothing before it so that's what we're checking over here index has to be more than zero and same thing this uh input refs current plus one so do we have the access to the previous one or not so here we were checking if we have the access to the next one here we will check if we have access to the previous uh Dom element so I'll simply say index minus one and simply inside of it this is what we are going to do just copy and paste it and simply instead of plus I'll say minus o minus let's check it out so let's say if we are here if we have pressed three and let's press backspace again yep we're back to the previous input Fields let's press again awesome this is working flawlessly now next thing that we have to handle is this so let's say if we are over here right if we if the cursor is behind this six if we press let's say two so right now the input was 2 six so it just took the last element that is six right but we don't want that we want the very latest input inside of it so what we simply want to do when we click on it this cursor should automatically move to the end so that when we write let's say two it switch to two and got rid of six so how will we do that and let me just add a comment over here that is this is moving Focus to the previous input field on pressing backspace okay so we're going to handle this handle click and this takes an index that's all because that is all we need to refer to that particular Dom element so inside of it I'm going to say input refs do cut current of this particular index and what we want to do we want to move the cursor to the very end so I'm going to say dot set selection range now what does this do it basically selects the text from one point to other point so you can see the offset in text field of the start of the uh sets the start and the end position of a selection in a text field so let's say if I say zero over here you're going to see it's going to select the complete text if I click on over here um at least two arguments okay it requires two arguments let's say 0a 1 so if I select this you see it has selected the complete input box so we don't want that right we don't want to select from 0o to one we just want the cursor to start from 1 to one so that is it going to start from here and end over here so instead of 0 comma 1 I'll say 1 comma one so notice if I even if I click on over here it's going to automatically move to the end notice this is such a cool feature right and if you found this feature cool open your Instagram app right now and search roadside coder and hit that follow Button as hard as you can because I'm very active on Instagram and if you have any doubts any queries or just a normal message you can ping me on Instagram for this so go on do it I'm waiting what I'm I'm being serious over here open your Instagram app right now and follow me there oh you've already done it okay let's let's move on with this video okay now after this I'm going to have a couple of more validations over here and this is completely optional because a lot of websites don't have this level of validation let me show you what I'm going to do over here so let's say if I have some input field um if I have entered four over here right if I go on and click on four I want it to move it back to this input field just to remind me that this input field is empty over here you have to filled it so I'm going to add this validation so I'll say if index is more than zero the index that we have clicked on so we are still inside of handle click index is more than zero and not OTP input minus one and I'll have to check if the previous one is the empty one so um let's do this so I'm checking over here if I clicked on it and if the previous field is empty then it's going to move us to the previous field now oh it's OTP P not opt why am I keep writing input over here it should be index so okay if both of these conditions are true I'll say let input refs do current instead of it I'm going to write OTP do index oops index of the first empty box that it finds so if this is the first empty box that it finds it's going to switch to that and I'll simply say dot Focus so now if I click on it it's switching to that one if I let's remove this if I click on it it's switching to the first one so that we can write over there as well we can write it in sequence 3 2 1 or whatever we like and over here I'm giving you one homework so what you're supposed to do is this let's say this is empty right and if we over here and if we remove this as well if I have typed one now it shouldn't move to this one it should jump directly to this input field over here right so this is a homework for you and this is very easy to implement trust me you have you just have to you know use a little bit of your brain cells if not you can use something like chat GPT or something like that so we have this code move to the next field if current field is filled so I think this is the place where you can make that change instead of moving to the next field you should move on to the next empty field and Yep this is how our OTP input field is made and since you guys have made it to the very end of this video I have a special announcement for you I am making a complete front-end interview preparation course with everything machine coding JavaScript reactjs and even some system design as well so click the link in description to join my Discord because that is where I will announce it for the very first time after just a few weeks and if you like this video and you would like to see more such videos like this click this card over my head and access the complete playlist

Channel: RoadsideCoder

Views: 91,647

Keywords: otp login react, phone number login react, otp input form react, navbar in react js, react interview, react interview questions and answers, react interview questions, frontend interview questions, javascript interview questions and answers, javascript interview questions, javascript interview, reactjs interview questions, reactjs interview, namaste react, namaste javascript, react interview question for experienced, react SDE2 interview, react login tutorial, react js login

Id: nQ-hy4PUta8

Length: 34min 20sec (2060 seconds)

Published: Sun Jan 14 2024