How to build a Traffic Light simulator (React Js Interview question)

[@anandbaraik5010]

You are doing great work ❤ thanks for bringing this machine coding questions!

[@xplodivity]

Thanks a lot, appreciate it!!

[@RavindraSingh-zg9eq]

really helpful and nice way to do this
.import React, { useState, useEffect } from 'react';
import './style.css';
export default function App() {
const [currLight, setCurrLight] = useState('green');
const trafficState = {
red: {
duration: 4000,
backgroundColor: 'red',
next: 'yellow',
},
yellow: {
duration: 500,
backgroundColor: 'yellow',
next: 'green',
},
green: {
duration: 3000,
backgroundColor: 'green',
next: 'red',
},
};
useEffect(()=>{
let timer=setTimeout(()=>setCurrLight(trafficState[currLight].next),trafficState[currLight].duration)
return ()=>clearTimeout(timer)
},[currLight])
return (

{Object.keys(trafficState).map((color,ind) => (

))}

);
}
//style.css
.container {
border: 1px solid black;
width: 130px;
}
.box {
height: 100px;
width: 100px;
border: 1px solid black;
border-radius: 50%;
margin: 10px;
background-color: gray;
}

[@aakashsrivastava5557]

Awesome content man...

[@ItsRavinderSinghh]

Great Video

[@investneur8232]

awesome

[@xplodivity]

Thanks!!

[@jayakumar9976]

Nice. PLease make this kind of similar video. But you increase the length of the videos little bit.

[@xplodivity]

Thanks, and sure I will do that!!

[@HARDY4006]

Same question was asked to me in a Bangalore based start up

[@xplodivity]

Yes this question is getting some “traffic” these days 😅 hope you were able to build it!!

[@ashortone]

Now make a netherlands trafficlight

[@HARDY4006]

Do you work in a startup?? Or are you a freelancer or you might be in tech giants like Microsoft, Google , Amazon , atlassian ??

[@xplodivity]

All I can say is, I am just an engineer who strives to learn something every single day. 😁