React OTP Input Field With Typescript & Tailwind CSS

MERN Bootcamp: www.udemy.com/...
In this video we will take a look at how we can create OTP field using react and tailwindcss.
Starter Codes: gist.github.co...
Final Code: www.uifreebee....
Social Media Links
Instagram - / ndpniraj
Twitter - / ndpniraj
Linkedin - / niraj-dhungana-23387b207
#tailwindcss #react

[@wisdomeshiet4259]

You know a great teacher when the same logic applies to a different concept... Thank you and God bless!

[@adiodamilare4406]

this is amazing.
u help me solve the bug that took me four days .
thank you

[@kukasn]

Please if you are using react js you might have issues after follow all the steps just add this block of code to make it work fyn
const handleOnKeyDown = (e, index) => {
currentOTPIndex = index;
if (e.key === "Tab") {
e.preventDefault();
setActiveOTPIndex(currentOTPIndex + 1);
}
if (e.key === "Backspace" && !e.target.value) {
e.preventDefault();
setActiveOTPIndex(currentOTPIndex - 1);
}
};

[@AnirudhMangalvedhe]

You are a savior thanks a lot

[@MDMinhazulAlamChowdhury]

great tutorial! but I guess, the string slicing method is not required in an OTP field if you just use the maxLength property inside the input tag

[@pedroh.belchioralves3626]

Thanks, it helped me too much, a hug from Brazil!!

[@jennifermagpantay7933]

Great explanation and video! Just in time to help me with a task I am working on! Thanks for sharing and congrats for the content!!

[@jennifermagpantay7933]

Also, I figured out another way without the need of onKeydown function and currentActiveIndex variable:
I have added to handleOnChange if statements:
if (!value) {
setActiveIndex(index - 1);
} else if (activeIndex === otpValue.length - 1) {
// once activeIndex gets the value of 5, or otpValue.length - 1, it will get this value set as its state.
// this would avoid the weird behaviour index values
setActiveIndex(otpValue.length - 1);
} else {
setActiveIndex(index + 1);
}

[@fsniraj]

That's the fun of programming. Same goal multiple solutions.

[@СергейНадоенко]

Love u bro, thank u so much

[@iyaremeyo]

Nice tutorial

[@temitopedavid9508]

Thank you bro

[@codebreaker2495]

Amazing content and explanation, thanks!

[@Shoutiez]

In case of user skip some input let's say [1]-[ ]-[3]-[ ]-[5] when i press backspace at last input (5) the number 5 and 3 not deleted and after debugging I saw that onChange event did not fire but onKeyDown did.
Do you have any idea how to fix this issue?

[@Shoutiez]

Currently my solution is to check in onKeyDown if the previous input doesn't have value I will remove the value of the current index as code below.
if (key === "Backspace") {
if (!otp[index - 1]) {
const newOtp = [...otp]
newOtp[index] = ""
setOtp(newOtp)
}
setActiveIndex(currentIndex.current > 0 ? currentIndex.current - 1 : 0);
}

[@robertoribeiro9166]

That's amazing! Thanks for this tutorial

[@georgesoriano3580]

Great Tutorial! Thanks more video to come

[@sallehshah]

Thanks alot , need this component for my day job.

[@motivationofthemindofc]

Would you like to make one for entering dates, and a regex to determine the numbers of days, month and year?

[@AzedineOuhadou]

thank you for this amazing video

[@samahgad241]

thanks alot very helpful and clear

[@dextreme1754]

the first 4 mins of your vid saved me thanks so much I spent like 3 hours to get this shit working by myself but the events registered/fired later so the index was always off for me thanks again :)

[@motivationofthemindofc]

Would you like to make one for entering dates, and a regex to determine the numbers of days, month and year?

[@motivationofthemindofc]

Would you like to make one for entering dates, and a regex to determine the numbers of days, month and year?

[@codewithadeveloper]

It was very helpful, thank you

[@shinnthantminn9758]

awesome tutorial that was so helpfull for me

[@eroachiever6883]

Thank you so much. Well detailed!

[@gauravverma1374]

Help!!! I am using this otp input component....when I passing this otp value string or OTP array to its parent comp. Through setstate...its not working

[@AvtandilShaburishvili]

Well done man, and thanx a lot for hint ^_^

[@AkshaySingh-uw2kj]

I want to start react native. Are you planning to make react native coourse? You have videos on it. But im not sure if that would be enough.

[@sinatajik8887]

It was a great tutorial

[@ozzzy9623]

ty! helped a lot

[@philip.thomas]

Could u show login and logout in react with out google login

[@joyentertainment9696]

Thanks bro 😊

[@yasserhy]

Nice one, but there is a big issue with this video. Unfortunately, you did not provide the full working code for people to check. Getting the code from your video is not easy since you talk too fast and move the screen and cursor quickly which makes it difficult for people to follow.

[@lokeshvasnik6872]

Exactly

[@aravindsanjeev4150]

You cannot copy and paste a verification code to this input box. It will just take the last digit and fill the first input.

[@Alireza-kw6fj]

any solution??

[@soulemotionshorts]

Not good coding practices used. Many features are missing such as pasting of otp.

[@surojitdas07]

i did this with 4 5 lines of coding what a waste of time