React JS Interview Questions ( Grid Lights - GreatFrontEnd ) - Frontend Coding Interview Experience

🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
#JavascriptInterview #ReactInterview #ReactJS
React Interview Question on building a Grid Lights will be created in this video along with tips and tricks to tackle your React JS and JavaScript Questions in Frontend Machine Coding Interviews.
⭐️ Checkout GreatFrontend to practice this -
www.greatfrontend.com/?fpr=ro...
➡️ Book an Interview Preparation call with me ( 20% OFF for limited time ) -
topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
/ discord
🟪 Follow me on Instagram and u will clear your interview 🤓 -
/ roadsidecoder
🔗 Complete Data Structures and Algorithms with JS Course - • Data Structures and Al...
➡️ Source Code -
github.com/piyush-eon/fronten...
🔗 Frontend Machine Coding Interview Series -
• Frontend Machine Codin...
🔗 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...
-------------------------------------------------------------------------
00:00 Intro
00:04 Demo
01:09 Initialising React JS App
01:20 Great Frontend
02:02 Defining the config for scalable UI
03:23 Building the UI
06:06 Styling the Component
09:06 Book a call with me
09:47 Activate Cell Functionality
12:37 Deactivate Cell Functionality
15:11 Handling Edge Cases
16:42 Adding Accessibility
17:23 Testing our App
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -

[@RoadsideCoder]

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

[@RavindraSingh-lp9pl]

@roadside. We need such useful coding challenges..these help us us a lot during interviews. Great job @roadside Coder..I am a big fan of yours 😍😄

[@prashlovessamosa]

Thanks for making these awesome videos.

[@sidd_shaikh]

All time favourite series please bring more videos

[@AdarshaCoder]

Great effort.. thank you for your videos

[@saravanasai2391]

After seeing the question 🙋 my initial thoughts are it can done by data structure called stack to track the order it filled and other color and interval logics are simple in js

[@user-mq5jy2vv4l]

@roadsidecoder, the slice() method creates a shallow copy according to mdn docs could you please explain how is it creating a deep copy here……?

[@RavindraSingh-lp9pl]

helpful video ::)

[@Anonymous____________A721]

Wow Tq sir

[@tarundurbha5398]

please make more videos in this series machine coding, please dude

[@vijayakumarkumar957]

Lot of Effort u put into this. Thanks a lot, Pls bring more videos.

[@akash_gupta_2090]

great video bro

[@yaswanthgosula2468]

IsDeactivating need to be state? Why can’t it be simple useRef ?

[@jp_flicks]

Hey Piyush, I downloaded your E-book but I am unable to open it, I don't know what is the file type, but it's not getting opened.

[@coderRox]

you don't need deactivating state. I had done this with 2D array but yours is simpler.

[@umairkhalid8204]

Can't we do this using state and useEffect only?

[@mohammedfaseeullah6095]

Bro , waiting for trees , graphs and dp 😂❤

[@RavindraSingh-lp9pl]

@roadside coder need few more help for below code. Can you please give me solution for below questions asked in React interviews- Question 1. a = [{id: 1, value: 1}, {id: 1, value: 2}, {id: 2, value: 20}, {id: 3, value: 30}] output--> {1: [{id: 1, value: 1}, {id: 1, value: 2}], 2: [{id: 2, value: 20}],3:[{id: 3, value: 30}]} Output should be : a = [{id: 1, value: 1}, {id: 1, value: 2}, {id: 2, value: 20}, {id: 3, value: 30}] output--> {1: [{id: 1, value: 1}, {id: 1, value: 2}], 2: [{id: 2, value: 20}],3:[{id: 3, value: 30}]} *************** Question 2- a = [{sum: 1}, {sum: 2}, {sum: 6}] Output should be sum of all that is 9

[@samarscript5824]

1:55 bhai paise maang raha h wo bhi btao sath mein ! Gajab ho yarr

[@user-bl1xc3ci3f]

Unable to clone the app , HELP

[@movieCafe872]

Bhaiya fresher Frontend developer ke liye system design pucha jata h kya interview me...

[@RoadsideCoder]

kabhi kabhi

[@VivekChavan-ov3pl]

from which site you got this questions ?

[@RoadsideCoder]

www.greatfrontend.com/?fpr=roadsidecoder

[@subhadeepghosh2813]

how to get this platform

[@RoadsideCoder]

www.greatfrontend.com/?fpr=roadsidecoder

[@ashishbisht5359]

while watching your videos ... what should be the approach? 1. Understand the question ... Try solving it my self ... the then see the solution OR 2. See the solution and then code the logic (this one seems boring)

[@RoadsideCoder]

first one

[@user-di4ww9in4s]

I have a better solution without using deavtivating state const activateCell = (index) => { if (order.includes(index)) return; setOrder([...order, index]); if (order.length === config.flat(1).filter(Boolean).length - 1) { deativateGrid(); } };

[@RavindraSingh-lp9pl]

@roadside coder. I was asked this interview question recently..can you please assist me const obj = { a: { b: { c: { d: 5, e: [1,2,3,4] } } } } get(obj, 'a.b.c.d'); // 5 get(obj, 'a.c'); // null get(obj, 'a.c', 'no value'); // 'no value' get(obj, 'a.c', {}); // {} function get(o, str, defaultValue){ // Your code, it should cover all the above scenarios }

[@mrmadhan8557]

console.log(get(obj, 'a.b.c.d')); // 5 console.log(get(obj, 'a.c')); // null console.log(get(obj, 'a.c', 'no value')); // 'no value' console.log(get(obj, 'a.c', {})); // {} function get(o, str, defaultValue){ if (defaultValue){ return defaultValue }else { let arr = str.split('.') let obj = o for (let i = 0 ; i < arr.length ; i ++) { obj = obj[arr[i]] } if (obj === undefined) { return null } return obj } }

[@mrmadhan8557]

check if it works please dont mind the variable name

[@RavindraSingh-lp9pl]

@@mrmadhan8557 you are simply awesome..it worked ..Thanks a ton !!

[@mrmadhan8557]

​@@RavindraSingh-lp9plyour welcome

[@tarunjha6488]

function get(obj, path) { if(path === '' || !path.length) return undefined; /* if path is and array, concatinate it and form a string to handle a single case of string */ if(Array.isArray(path)) path = path.join('.'); // filter out the brackets and dot let exactPath = []; for(let i=0; i source[path], obj); // if not found return undefined return value ? value : undefined; }

[@draconianyt5174]

Very confusing

[@waghdoh4845]

ye sbb inaaa saara fresher se poocha jaa rha he???

[@RoadsideCoder]

agar as a fresher 10-15 LPA expect kr rhe ho to - yes. Agar TCS me 3.5 LPA me jana h to - No

[@waghdoh4845]

@@RoadsideCoder reply ne aukaat dikha di mujhe meri.....thank you bhaiya😂😂 Bada package mile na mile anyways will practice questions from your playlist ❤️‍🔥

[@vcaptur]

@roadsidecoder, the slice() method creates a shallow copy according to mdn docs could you please explain how is it creating a deep copy here……?