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

let's discuss a very popular react coding question that you may encounter in your tomorrow's interview so the question says that we're supposed to build a 3X3 grid of light cells where you can click on cells to activate them turning them green so if you see over here this is the UI that we're supposed to build and they're saying that whenever we click on any of these boxes it's going to turn green okay when all of the cells have been activated they will be deactivated one by one in reverse order they were activated with a 300 millisecond interval in between so over here this is the UI that we're supposed to build so if we click on any of these sales you can see they are turning green but as soon as we have clicked on all of these sales you going to see they're going to get deactivated in the reverse sequence so if I let's say activated them in this circular format they will get deactivated in the circular format as well also in this video I'm going to tell you the best practices that you need to keep in mind while building an app like this in your react interviews like best coding conventions folder structure variable naming optimizations Etc but before we do that hit that subscribe button right now if you want to see more such videos like this because you won't find content like this anywhere else on YouTube so over here we have initialized a new react app they've given us this folder with an index HTML so over here you can see that we have a basic react app initialized and we're inside of this app.js but wait you might be thinking what is this platform that I'm doing this question on this looks like lead code except it is for front-end interview questions so click the first link in the Des destion down below and you will land on greatr end.com here you can find hundreds of frontend interview question whether they are JavaScript reactjs frontend DSA questions machine coding system design and even behavioral questions as well and here if I click on try a question search or here grid lights yep there we go I've landed on this question over here they have a plenty of free questions as well so you should check it out before deciding to pay I personally have subscribed to their lifetime plan so that I can have access to these questions whenever I like okay first thing first whenever we build some app like this or some UI like this we have to make sure that this is very scalable that is let's say tomorrow if interviewer asked me to change this you know circle like thing to maybe a c shape or maybe something like uh you know only these three blocks or maybe only these many blocks something like that so we have to make sure that our UI is scalable so what we're going to do is we're going to Define an configuration for this so over here here I'm going to take a const config which will be an array and inside of this array we're going to take for each and every row we're going to take one single array first array second array and third array now so if youve noticed what we're doing over here is we're basically creating a matrix so inside of this Matrix wherever we have a block we're going to keep that as one that this is going to be the part of our UI so one one one now in the second we have one then since there's no block over here I'm going to keep it as zero and then one and then for the third one I'm going to c one 1 one right so you can see this looks somewhat similar to what our UI is going to look like now for let's say tomorrow interviewer asked me to remove this block I can simply put it as zero easy so yeah this is the config that we are going to use now inside of or here inside of our div I'm going to give this a class name name of wrapper insert this do I'm going to have a grid obviously because this is a grid at the end of the day right so I'm going to have another div and I'm going to give the class name of grid to this and inside of it we're going to render our config with all of these blocks so I'm going to Simply say config do flat so why are we doing flat over here so the reason is because this is a two-dimensional array or a matrix right so to Traverse through through this I'm going to make it flat so after I've ran the flat function over here it's going to look something like this 1 comma 1 comma 1 comma 1 comma 0 come on basically it's going to remove all of these brackets over here so okay I'm going to run flat and I'm going to give this one so that it can run only till one depth then I'm going to run map so it's going to take a call back obviously first one is going to be value and there is going to be index and inside of this I'm going to render another component called cell which obviously doesn't exist yet so I'm going to create it right above this component function you can also create a separate file for this component as well which is also the best practice but in this case just to keep all of this code over here I'm going to create this component okay it's going to take two things first is going to be a filled prop other is going to be onclick prop right because obviously we have to decide if the a particular cell is going to be filled or not and what happens when we click on it so cool I'm going to return simple button over here this will be of type button I'm going to provide it the on click function also if it's filled or not so for filled I'm going to say class name so I'll check if if it's filled then it's going to have a class name of cell and a class name of cell activated else is just going to be having a class name of cell that's all and this is going to be a self closing button we're not going to keep any text inside of it so just like that also over here I'm going to provide the key obviously because when we map through something it requires a key so I'm just going to provide it index over here and if it's filled or not so right now it's not filled let's put all of them to false and on click I'm going to run a function called activate cells which doesn't exist yet I'm going to provide it the index IND so I'm just going to keep it empty for now over here we will take an index that's all now let's go on and give this some Styles so I'm going to go to styles. CSS so first of all I'm going to give this wrapper class some style this class over here so simply I'm just going to put display to flex align items Center and justify content Center Flex direction is going to be column and gap between all of these cells is going to be 60 pixels what basically this is doing is it's aligning the whole UI to the very center of our screen and actually I forgot to return it over here that is why we can't see it so now yep you can see we have 1 2 3 4 5 6 7 8 nine items over here let's go on and give style to our grid class I'm going to keep it display grid Max width is going to be 300 pixels width is going to be 100% I'm going to give it some padding of 20 pixels and some gap of 20 pixels between them and let's give them some border as well okay now let's go on and style each and every individual cell inside this cell class I'm going to give it some background color of transparent when it's not activated some border of one pixel solid black height is going to be Z Z after that padding bottom padding bottom is going to be 100% so these two lines are basically making the height and width equal for each and every cell so over here you can see you're starting to see our UI also when a particular cell is activated we're going to apply the cell activated class right so cell activated and this will simply have the background color of green background color of green if I provide background color green over here you can see all of them turn to Green but we don't want them as a default value now you might be thinking why are these coming from top to bottom and not in a grid format so I'm going to provide a style tag over here and I'm going to tell you why I'm doing it over here instead of inside of CSS file the style tag is going to have a style grid template columns and inside of this I'm going to give repeat whatever the length of each and every column inside of our grid is so config of 0 do Len and this will have one fraction of our available space so okay what we are doing over here is we're saying repeat this these many times so there are three items in one single column so that's what we're doing over here we're repeating config of zero. length and then we're saying give it one F if I let's say give it 50 pixels you can see the size of this is 50 pixel but but right now I've given one means one fraction of the space available to each and every block all right but one thing you may have noticed this is giving us nine blocks we only supposed to render a block if our config has one over there so okay here I'm going to say if value is one then render cell else just render an empty span just like that so you can see our UI is starting to match our result now if you're preparing for your front end interview and you would like me to help you in your front interview preparation just click the link in the description down below and book a one-on-one call with me we're going to discuss tips tricks I'm going to give you a lot of resources I'm going to design a proper road map tailor to your situation which is going to help you out a lot in your front-end interview preparation so click the link in the description down below and book a one-on-one call with me okay so now I'm going to go on and write functionality for this activate sales so it's simply taking an index over here and if you may remember whenever we click on each and every CES and when we have filled all of these sales it's going to go into reverse verse manner so obviously we must have some state where we are keeping the track of all of these indexes right so I'm going to take a state over here const Order set order equals use State and the default value will be empty and start this I'm going to keep on pushing the items as we encounter them so okay we haven't uh imported use state so import use state from react now inside of this I'm going to take uh variable called New Order and this will take the initial value whatever is inside of our order and it's going to add the index to it then I'm going to say set order to New Order this should do it but after that we also have to track deactivating of cells as well whenever this is full we are supposed to start the deactivation so I'm going to say if New Order do length is equals to this thing config do flat we have to check if it has reached the number of items that are inside of our array config do flat dot filter Boolean do length so what this filter Boolean rooll over here is is that it's going to remove all of the falsy values from inside of our array that is we have this zero as well right so it's going to remove the zero and only give the length for 1 2 3 4 5 6 7 eight items inside of our array so when this is true when we have reached the limit I'm going to call another function called deactivate cells which doesn't exist yet so I'm just going to create it right above this which will be empty for now all right now inside of this activate CES I'm going to do a console log and I'm going to print New Order so if I click on any of these let's say if I click on over here you're going to see inside of our console we have created this array with index 3 so if I click on bunch of more let's say if I clicked on Fifth then sixth then C it's going it's tracking the indexes of all of these arrays that are been that have been clicked so that we can later on deactivate them in the reverse order so all right so now simply I'm going to remove this console log first and over here instead of this false I'm going to say order do includes index so if our order includes that particular index we're going to light that up so yep you can see just like that so obviously right now we don't have any deactivate cell logic that's why it's activated so let's refresh it so let's go on and write the logic to deactivate our cells as well so inside of this deactivate cells I'm going to first of all take a state over here which will be is deactivating and it's going to be false by default obviously now over here I'm going to set set is deactivating to true and after that we're going to run a set interval for every 300 milliseconds so that we can disable them one by one until this array is empty over here all right so I'm going to say const timer equals set interval inside of this I'm going to have a call back which is going to run every 300 M second now inside of this set interval I'm going to Simply do set order and I will take the latest value from the order because so as you may know these timers run whenever our whole code has been executed that is the logic of event Loop so basically why we are writing this calling inside of set order so that we can have the very latest value of our state original order value and over here I'm going to say const New Order original order. slice so this over here is going to be creating a deep copy of this order over here if we don't do this if we just make changes to this it might mutate the orders array So to avoid mutating it we're taking a new variable over here I'm going to do new order do pop that is this will remove that particular element from the array now simply I'm going to say if if it's empty so if new order. length if it's equals to zero then clear interval and I'm going to give timer so this will clear this timer and it will stop the timer and I'm going to say set is deactivating to false and in the very end I'm going to return New Order so that this can get the new value of this order and you can update it so now the question is why have I taken this is deactivating variable so okay we're going to see that but let's see if the functionality is working fine right now or not oh there's some issues over here let's see what's wrong I guess it's because of this one that I've added inside of this slice I don't know why I did that my bad okay I think now that should fix it let's try to do this all right our UI is working successfully congratulations but wait there are some flaws inside of it so if you see if uh you know I just go on over here and just to console. log New Order now not this whenever I click on this click on this you can see we have a normal array but if we click on this again this will add zero to it we don't want that we don't want the duplicate value over here so you know if I just do this you're going to see it's creating problem for us so we don't want duplicate values so what we're going to Simply do I'm going to say is disabled and this is disabled how do we check if we're supposed to disable a particular button or or not so first of all if order do includes the index so if that index is already activated then obviously we're not supposed to click on that button so that button should be deactivated or the deactivation is already going on so if it's is deactivating that is the use of this prop so okay I'm going to go insert of our cell and I'm going to have another prop called is disabled and I'm going to Simply provide this button disable to be is disabled right now it won't create a problem for us awesome so these are the types of edge cases that you need to take care of while doing these questions in these interviews also one more thing some interviewers might ask you to add the accessibility to it so to add the accessibility simply what I'm going to do I'm going to provide a label from over here label oops label and we can say say cell and whatever the index of it like cell one cell two so that you know people who are visually impaired or have some sort of issues using the browser they can know that what cell that they are clicking on so okay I'm going to take this label go inside of this celles component or cell component take this label and I'm just going to give this area label tag and I'm going to provide this label over here awesome okay so let's go on and test our UI now I'm going to click on random blocks and you're going to see it's going to get disabled in the reverse format and yep that is it for this question you can click the first link in description down below and check out gr front if you buy any of their plans it's going to support my channel as well also if you like this video you can find out more videos like this by clicking on this card above my head

Channel: RoadsideCoder

Views: 28,203

Keywords: react js pagination, react interview, react interview questions and answers, react interview questions, frontend interview questions, javascript interview questions and answers, javascript interview questions, javascript interview questions and answers for experienced, web developer interview, web developer interview questions and answers, javascript interview, reactjs interview questions, reactjs interview, Namaste javascript, namaste react, progress bar react, greatfrontend

Id: sAF7Km_znjA

Length: 17min 45sec (1065 seconds)

Published: Sun Oct 29 2023