OTP Component ReactJS | React Machine Coding Round Interview Questions by Frontend Master #reactjs

1 Month Live HTML To React Course:

Frontend Interview Kit:

How OYO Does it

Learn to make OTP component step by step - with all edge cases
React Machine Coding Interview Questions
Frequently asked react interview questions
how to master reactjs
mastering javascript

Content:

00:00:00 What is OTP component
00:01:50 Bug in Disney Hotstar
00:03:35 Requirements
00:06:00 Design System
00:09:00 Creating Components
00:12:00 Taking user Input
00:16:20 Moving Focus to Next Input
00:20:55 Backspace
00:23:20 Block Non Integer Input
00:28:00 Changing focus on Arrow Key
00:30:30 Caret Position Change on click
00:33:40 Focusing First Empty Input
00:37:25 Bug 1
00:38:04 Bug 2
00:39:40 Bug 3
00:42:37 inputMode
00:43:45 autofill OTP
00:47:30 Masking
00:50:30 Sending OTP to parent component
00:53:05 paste Event
00:55:55 onChange maxLength autocomplete issue

#reactjs #frontendmaster #javascriptinterview #reactjs #frontenddeveloper #javascript

[rahuulmiishra]

Season 2: React Machine Coding Questions

Frontend Interview Kit:

[allmighty]

from some of your shorts I misjudged you that you might be another youtube whos teaching without proper knowledge like many now a days,
but you are really one of the best teacher I have ever seen, truly a frontend Master

[Niamudeen]

This is so brilliant. I learned so much new stuff just in one video, i.e keyboard events, ref list, etc. I would love to connect with you sir. ❤

[sagarmondal]

Sir video upload agar regular hota(1-2 day ke ander) to our acha hota hamare liye.
But this video is much helpful for me, thank you sir for learning in depth level in all details....💖

[Aerotk]

Sir, aik project ko le kar React project ko optimize karne ki kindly video bana dein Specially to stop all unnecessary re-rendering of the components in the project. Thank you.

[Sneakingmentor]

I was looking for this for a very long time thanks. Sir can the companies ask same projects with same indepth in JavaScript only?

[aqwe]

sir please come up with new projects this would be very helpful

[abc-ysww]

please make a video on progress bar in react js ?
I am confusing in structure of elements

[ZahidaSaleem-ni]

Autocomplete wala onchange aur onpaste me kese handle kiya hai i did not get it

[akashddeepchitransh]

One doubt, why we did not use onChange at the first place instead of onKeyUp?

[BlingH]

its better to mask the values using this logic -
const maskedValues = ["😀", "😁", "😄", "😎"];

const useMaskedValues = (values: string[]) => {
return values.map((v, i) => {
if (v.length === 0) return "";
return maskedValues[i];
});
};

Usage -

const [slotValues, setSlotValues] =
const maskValues = useMaskedValues(slotValues);

<input
onPaste={handlePaste(i)}
tabIndex={0}
type="text"
value={maskValues[i] ?? ""}
....
</input>

[Procoder-q-o]

Hi sir pls help me that how to js & react mastering

[BlingH]

An even better version with random EMOJIs -

const sampleMaskedValues = ["😀", "😁", "😄", "😎", "👽", "🌭", "🐲"];

const useMaskedValues = (values: string[]) => {
const [maskedValues, setMaskedValues] = useState<string[]>(

);

const updateMaskedValue = (opType: "ADD" | "DELETE") => (index: number) => {
setMaskedValues((prev) => {
const newValues = [...prev];
if (opType === "ADD") {
newValues[index] =
sampleMaskedValues[
Math.floor(Math.random() * sampleMaskedValues.length)
];
} else {
newValues[index] = "";
}
return newValues;
});
};

return { maskedValues, updateMaskedValue };
};


USAGE
const { maskedValues, updateMaskedValue } = useMaskedValues(slotValues);
const addMaskValue = updateMaskedValue("ADD");
const deleteMaskValue = updateMaskedValue("DELETE");

use addMaskValue where you are chnging values on input fiels For eg : onChange
use deleteMaskValue where you are removing values For eg: on Backspace press