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

React Interview Question on implementing a OTP login with Phone Number feature will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.

👤 Join the RoadsideCoder Community Discord -

🔗 React JS Interview Series -

➡️ Source Code -

🔗 Strings Video -

🔗 JS Interview Series -

🔗 Cars24 Interview Experience -

🔗 Unacademy Interview Experience -

🔗 Tazorpay Interview Experience -

🔗 MERN Stack Tutorial with Redux -

🔗 React Beginner's Project Tutorials -

#JavascriptInterview #ReactInterview #ReactJS

-------------------------------------------------------------------------

00:00 Intro
01:05 Setup New React App
03:12 Phone Login Component
10:42 OTP Input Component
16:08 Styling OTP Inputs
16:57 OTP Field focus after First Render
19:29 Updating OTP Field Logic
25:26 Move to Next Field after Input
27:08 Move to Previous Field on Backspace
29:08 Move Cursor to Last on Click
31:00 Adding More Validations
33:11 Homework for you
33:52 Secret Announcement

-------------------------------------------------------------------------

⭐ Support the channel -

Special Thanks to our members -

[hamzaseif]

Me : there is no way i will get asked these tricky js questions in my interview but lets watch roadsidecoder js interview questions anyway,
95% of the questions were from your videos lol , thanks a lot

[amitavasengupta]

I had my machine coding round yesterday and the interviewer asked me to code this otp functionality. He was super impressed and I got selected in the technical round, next is hr round. Thanks dude for making this awesome content. Wish I had even 50% of the knowledge you have then I would be a superhero like you

[manojinderparmar]

Thank you so much for creating such a usable OTP component. I have implemented it in my project after learning it from you.

[aqibmalik]

this has many bugs
click backspace on 3 field gives error
backspace does not remove the value in first field

[kalideb-yy]

this is a smaller code to only focus first input element, put this on attribute "autoFocus={index == 0}" 🤓

[omrajgure]

Hey you are awesome 🙌….your channel is so underrated 😢…..thanks for this great content and try making a playlist of you developing complex only react projects ❤…..you gained a sub 🎉

[nikitarawat]

onKeyDown event is not working as expected. when i click backspace, the cursor still remains on the same input and when i again click backspace it goes to the previous input and automatically delete that otp. Instead, onKeyUp works perfectly fine in my code. why this happening?

[PulkitMalhotra]

Nice video but where is the verification logic part

[Lucifer-xtun]

Sir please bring a complete machine coding course please there are no one who are dealing this in complete market

[LatentIndia]

sir please make video on portfolio website using react

[ManoharBatra]

best video on machine coding, you covered many things in one video.. kudos... let's collab again because my audience is waiting :)

[TooJoo]

HomeWork answer :
const value = e.target.value;
if (value && idx < length - 1 && inputRefs.current[idx + 1]) {

}

[besalraj]

Tweaked handleChange function to

const handleChange = (index, e) => {
const num = e.target.value;
if(isNaN(num)) return;

const newOtp = [...otp];
newOtp[index] = num.substring(num.length -1);
setOtp(newOtp);

const combinedOtp = newOtp.join("");

{
onOtpSubmit(combinedOtp);
}

// shift focus to next empty element
const nextEmptyIndex = newOtp.indexOf("");

if(num && nextEmptyIndex!==-1 &&
{

}
}

[ArbazKhan-qmvc]

Not able to focus on the input when clicking on it

[web_dev_with_ak]

Very very very useful video for frontend developers.
Thank you for giving the knowledge 👌👌👌👌

[theofficialleaker]

Home work Answer ;
do it inside onclick
if (index >= 0) {

}

[rocs]

Awesome tutorial! I'm new to React and I followed along in Typescript and had no problems.
Very good explanation of why you use particular methods/patterns in certain situations!

btw, you jump scared me with the Instagram sponsor 🤣

[xdotaku]

I didn't try it, so correct me if I am wrong. If we are using "tab" button to move b/w components, the "onClick" won''t trigger. So maybe we should run the cursor positioning function on "onFocus"?

[prashanthgv]

Please create a video on Form Validations

[kiva]

Outstanding very useful video & doing a great job bro🤓🤓🤓