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

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder....
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roa...
🟪 Follow me on Instagram and u will clear your interview 🤓 - / roadsidecoder
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 -
/ discord
🔗 React JS Interview Series -
• Frontend Machine Codin...
➡️ Source Code -
github.com/piy...
🔗 Strings Video -
• Strings - Data Structu...
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
🔗 JS Interview Series -
• Javascript Interview Q...
🔗 Cars24 Interview Experience -
• Frontend Interview Exp...
🔗 Unacademy Interview Experience -
• Frontend Interview Exp...
🔗 Tazorpay Interview Experience -
• Frontend Interview Exp...
🔗 MERN Stack Tutorial with Redux -
• MERN Stack Project Tut...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutor...
#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 -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/

[@rishiraj2548]

👍

[@mdiftekhar0000]

valid

[@_sarthakmisal]

Bhai paise nahi hain

[@hamzaseif4992]

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

[@RoadsideCoder]

Hahah, Thanks a lot!

[@manojinderparmar2277]

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

[@amitavasengupta5580]

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

[@RoadsideCoder]

Amazing bro! Congrats.

[@iniyaninba489]

@@RoadsideCoder Bro I have a doubt, in this video, at 4:00 , You just clicked on PhoneOtpForm, and then it got imported in the code, how can we do it bro, which extension bro?

[@rocs11]

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 🤣

[@H_NileshKumar]

Is it necessary or important to shift to typescript in react?

[@rocs11]

@H_NileshKumar Neither TypeScript nor JavaScript is strictly better for React development in all cases. But it has its advantages, like type safety and better IDE support (autocompletion, etc.). So, for more complex projects, I will use Typescript, and for fast prototyping, I'll go with Javascript. But again, it's also a preference.

[@H_NileshKumar]

@@rocs11 I see , well I just found that I suck at logic building. Maybe bcoz I haven't done many projects with simple js ,so I'm doing that rn

[@TooJoo77]

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

[@theofficialleaker2495]

its too long bro just do if (index >= 0) { inputref.current[otp.indexOf("")].focus(); }

[@guptasagar694]

@@theofficialleaker2495 Kaha se chalega ye, Question kya he aur tu bata kya raha he, agar kisi input field jo empty ho uspe directly jana he

[@ManoharBatra]

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

[@RoadsideCoder]

Thank u so much bhai 🥹

[@rayyanabdulwajid7681]

Yea, it was an excellent video

[@web_dev_with_ak]

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

[@mdiftekhar0000]

yeah you're right dude

[@VikasKumarSingh-m4h]

AWESOME LEARNT A LOT

[@omrajgure4553]

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 🎉

[@griffinannshual4205]

Great video brother, learned a lot!

[@aqibmalik6313]

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

[@LENDUONG-er3zq]

hay quá anh zaii oiiii

[@AbhishekKumar-td5zu]

great job !!

[@eehan1769]

i had to watch twice to keep up but amazing content!!

[@kiva1806]

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

[@goshmain982]

this is practical example of real world enterprise grade production ready tutorial thank you so much

[@RoadsideCoder]

You're welcome!

[@ChauhanJiVlogs007]

Great video... Brother...🎉🎉🎉🎉

[@nikitarawat953]

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?

[@nishanbangera9349]

I am facing the same problem...have u rectified the reason for that bug?? If yes please tell me

[@AllAboutIelts24by7]

hi, it is happening because of the default behavior of backspace which is removing the character from input box. It can be resolve just by using this statement event.preventDeafult(); in the block where we are writing specific code for backspace.

[@suchithkumargm]

amazing video....very clear explanation

[@xdotaku5182]

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"?

[@debaprasadbehura968]

bhai esa laga ki jaise tune ye sab kahan se rata mar ke ayae tha baise likh diya jo kar raha hai samjahana cahiye tha na bas likhe ja raha hai yar btw good content or code already present in geeks for geeks

[@RoadsideCoder]

bhai iss video ko follow karne se pehle apko react js aani zruri hai, else u wont understand the code.

[@ffgameing8936]

​@@RoadsideCoderBhai react padha hun main Mujhe app PE koi doubt nehi Hain bus ya bol Raha ti app ne pura geeks for geeks copy kar diya Apne kuch neya nehi samjhaya isiliye bola ye Mera alag I'd hai But thanks to this video It helps me know a lot of things ❤❤❤❤❤

[@Aviralsingh-yw7xx]

Thanks a Lot Sir.

[@RoadsideCoder]

Welcome!

[@anusmitakundu2366]

This is so good. 💯

[@subhadeepghosh2813]

U are really doing a great job bro

[@besalraj4334]

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(""); if(combinedOtp.length==length) { onOtpSubmit(combinedOtp); } // shift focus to next empty element const nextEmptyIndex = newOtp.indexOf(""); if(num && nextEmptyIndex!==-1 && inputRefs.current[nextEmptyIndex]) { inputRefs.current[nextEmptyIndex].focus(); } }

[@kalideb-y3y]

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

[@akshaylokray]

@RoadsideCoder how to build Aadhar input box where we have 3 input boxes that take 4 numbers each?

[@subramanianchenniappan4059]

Great . Thanks 😍😍.

[@ArbazKhan-qm2vc]

Not able to focus on the input when clicking on it

[@prashanthgv86]

Please create a video on Form Validations

[@lucasaguiar7391]

which browser do you use?

[@RoadsideCoder]

firefox

[@LatentIndia]

sir please make video on portfolio website using react

[@khomrajacharya6480]

Please make a video on form validation

[@RoadsideCoder]

Ok Soon!

[@soumyadyutinandy5119]

Just implemented wordle and it is very similar to this concept

[@nileshsangle4946]

nice one sir

[@arpankumar4176]

make a video on form validation

[@RoadsideCoder]

Definetely!

[@theofficialleaker2495]

Home work Answer ; do it inside onclick if (index >= 0) { inputref.current[otp.indexOf("")].focus(); }

[@asadmehboob1300]

If we want to past 4 digits from email or phone no?

[@dasarimanoj3086]

When we gave the condition of phone number length to be < 10 then why is it allowing us to type random number more than 10? Shouldn't we throw an alert?🤔

[@RoadsideCoder]

we are saying lenght>10 not less, just as an example.

[@ajaymalviya.7]

The length should be exactly 10 and having only 0-9 in regex isn't correct validation, but that logic 000000000 will also be a valid number. Indian numbers start with 6-9 or 0 (044) in case of landline numbers.

[@harvindersingh9170]

Why don't we just use a normal text input to place OTP?

[@mateenmahi]

Coz it's user friendly

[@_sarthakmisal]

How is onOtpSubmit still working even after you declared it again with const

[@arjunjadhav3062]

i am trying to book your call but not happening actually money deduct ho gaya he do baar but call booked nahi huva.

[@RoadsideCoder]

Please contact me on instagram @roadsidecoder with the screenshot

[@PulkitMalhotra]

Nice video but where is the verification logic part

[@AshikRahman-fw3sv]

WOW 😲😲😲

[@pkam5690]

Hey, that's my number..

[@RoadsideCoder]

50 diffrerent people said that

[@ultragamersvk1668]

WHY DON'T YOU USE TAILWIND CSS?

[@sandiss1210]

guys how can i get thier animated background

[@srikarravoori124]

I have got the downloaded file. Thanks

[@DastageerHC]

I was asked this question last month,

[@murali-krishnan]

Are you a fresher or have some experience? At what level does this question get asked?

[@technicalrider6196]

Continue this series

[@jsagar95]

Thanks!

[@Lucifer-xt7un]

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

[@RoadsideCoder]

Releasing Soon. 🔥 Join here to be updated - discord.gg/2ecgDwx5EE

[@Lucifer-xt7un]

@@RoadsideCoder may i know any tentative time line for course launch pleasee

[@RoadsideCoder]

1st week of feb most probably

[@Lucifer-xt7un]

@@RoadsideCoder exciteddd🥳🤩🔥

[@nisargbarot1998]

​Nnn@@RoadsideCoder

[@captainjacksparrow8916]

Thank You sir jii

[@gautamnangla2594]

Sir ye fresher interview question h kya experience

[@RoadsideCoder]

both

[@gautamnangla2594]

@@RoadsideCoder sir web dev kr rakha h pr job nhi mil rahi h . Portals pr try krte h scam call aati h and paise maangte h .. . Kuch btaao sir first job kaise le IT sector m

[@guptasagar694]

Nahi Mil paege..Kon si city me ho...Let me know, I will help@@gautamnangla2594

[@gautamnangla2594]

@@guptasagar694 faridabad haryana

[@_sarthakmisal]

Bro theme kaunsi hai

[@RoadsideCoder]

peacock extension

[@Gymaurcode]

Bro make videos on RTK query and redux toolkit

[@_sarthakmisal]

Bhai console close Kara Karo recording ke time

[@goshmain982]

love you

[@samarscript5824]

33:49 Is there anyone here who has done the work I came specifically for?

[@guptasagar694]

Yes Bro, if (value && inputRefs.current) { for (let i = index + 1; i < length; i++) { if (!inputRefs.current[i].value && inputRefs.current[i]) { inputRefs.current[i].focus(); break; } } }

[@eehan1769]

19:29

[@stacked-dev]

Brother don't wast time on building such UI from scratch you can use the thirld party libraires .

[@RoadsideCoder]

In interviews you wone be allowed to use third party packages

[@AlgoIT__]

Unnecessary give one input box y u need 4 I never understood

[@RoadsideCoder]

hahah, because this is the convention of an OTP Input

[@guptasagar694]

To be honest, i foillowed this tutorail but the logics opf moving inside the OTP field, I didnot get any logic, Didnot understand a word...What to Do, Please help

[@AshikRahman-fw3sv]

💚💚💙💙💖😍😍

[@Upsc2029-hy6ey]

fun fact: mobile number will go viral.

[@aakashyadav6228]

NGL, looked like you yourself were bit confused

[@mattakalyan1427]

best video at final I tried with this logic inputRef.current[newOtp.indexOf("", index)].focus(); and it worked I just want to compare with your logic @roadsidecoader

[@subhamrakshit7755]

inputRef.current[newOtp.indexOf("")].focus()