2.5 Years Experienced React JS Interview | Chakde Frontend Interview EP - 21

[@aniketsharma7941]

Hi Chirag,
Thank you once again for the opportunity. The interview was very insightful and helped me understand my current level of knowledge and the areas I can improve.
You’re doing great work by providing this kind of content to the community.
Thanks,
Aniket

[@pratham9987]

Your great coder.

[@mahekjariwala3560]

The difference between keyup and onChange is that
onChange is trigger when there is something change in an input value, keyup trigger when user release currently pressed key. The keyup is trigger even if there is no change in an input value like Enter key release, Arrow up, Arrow down etc.
Also, keyup, keydown,keypress are device specific event meaning it will only fire in desktop.

[@zebaroohi8888]

Thank you so much for coming up with new coding challenges every week. This is really helpful and great for learners. Keep going, Chirag!

[@jagadeshvarmasvpkh7860]

Very good mock interview best question.

[@ArpitSingh-wp6yx]

Bring more experienced React developer interview

[@CKsisodia]

Thank you so much sir for the valuable content 💐💐

[@DeepLajpal]

Nice Experience for me like how to approach a problem statement.

[@satyanarayana480]

Hai Sir Please make a video on Agile methodologies and Jira Tool for Developers (Fresher to Experienced)
Want's to hear this from you 🙏
must cover --->
Sprint Backlogs
Retrospective Sessions
Business Refinement sessions
How many types of methods
Iterations
Agile sprint methodology
Waterfall model

[@ArpitSingh-wp6yx]

And give your own expressive feedback also ...
How we can give feedback ..
We r here to learn...

[@udaykulkarni5639]

What was the dude even trying to do???

[@tarun29061990]

Mai to chirag bhai ka fan hu :D

[@UmeshSoni-c6d]

onChange in input, makes trigger function on every change or we can say on every character input function will be called.
This makes nothing good in this scenario, function should be invoked when we key Enter.

[@arunaditya665]

This is my approach sir
import React from 'react'
import { useState } from "react"
function Lights() {
let lightsList = [
{
name: "Red",
time: 2,
index: 0
},
{
name: "Yellow",
time: 2,
index: 1
},
{
name: "Green",
time: 2,
index: 2
}
]
const [currentLight, setcurrentLight] = useState(lightsList[0])
const [isConditional, setIsConditional] = useState(false)
const [showInput, setShowInput] = useState(false)
let customTimeRef=null
function handleCustomTimer(){
setTimeout(customTimeRef)
setIsConditional(prev => {
return !prev
})
setShowInput(prev => {
return !prev
})
setcurrentLight(lightsList[0])
}
function handleCustomTime(p){
let input = Number(document.getElementById("num").value)
customTimeRef = setTimeout(handleCustomTimer, input *1000)
}
function customHandle(p) {
setIsConditional(prev => {
return !prev
})
setShowInput(prev=>{
return !prev
})
clearInterval(timeRef)
setcurrentLight(lightsList[p])
}
function handleLight() {
if (currentLight.index == 2) {
clearInterval(timeRef)
setcurrentLight(lightsList[0])
}
else {
clearInterval(timeRef)
setcurrentLight(prev => {
return lightsList[prev.index + 1]
})
}
}
let timeRef = null;
if (!isConditional) {
timeRef = setInterval(handleLight, currentLight.time * 1000);
}
return (


{
customHandle(0)
}}>Red
{
customHandle(1)
}}>Yellow
{
customHandle(2)
}}>Green

{showInput &&

Click
}






)
}