React JS Interview Questions ( File Explorer ) - Frontend Machine Coding Interview Experience

the question that I'm about to discuss today is asked in so many companies from Big mncs like Google to startups like cast 24 in react.js interviews and ever since I discussed a beginner version of this question in my cast 24 interview video I have received the hundreds of messages from you all telling me how many times you have encountered this question in different different companies so that's why in today's video I'm gonna discuss both beginner and the more advanced variation of this question so stick to the very end of this video because there's a very high chance that you may encounter this question in your tomorrow's front-end interview so let me quickly discuss our problem statement over here so the interviewer has asked us to prepare a Json data which we can render this way we can have a root folder inside of which we can have multiple folders and files nested deeply inside one another so we are supposed to render them and it can be infinite so as you can see over here the UI looks just like this so just ignore this plus folder and plus file for now I'm just discussing the basic version of this question that is asked in the most of the interviews most of the beginner interviews so as you can see when we open this we have two folders one file if you open this folder we have more folders and file and we have more files inside of this folder and similarly if you open this SRC folder we have more files inside of it so we are supposed to prepare such as Json and a UI which can adapt to one another infinitely and as I mentioned this is the beginner version of this question that is asked in most of the interviews but in more advanced interviews what interviewers ask you to do is they ask you to have two buttons over here one for folder one for file by using which we can create a new file or folder so if I click on this plus folder you can see this UI looks just like vs code when we click outside of it you can see it's gone if you click on file yep you can see the file icon over here we can enter the file name so if I let's say new DOT JS and press enter yep new file has been created over here similarly for the folder as well press enter yeah the folder has been created and we have to take care of all of those use cases that if we click on it and we click outside of it no new item will be created if similarly if I click on file and click outside of it no new item was created so this is basically a clone of vs code sidebar and this insert functionality in this problem is very important and you will soon know why as we go along in this video so the interviewer asked me to open code sandbox and create a new react.js app so I'm going to click on this create button and click on this react so there we go we have initialized a new react.js app let me remove everything inside of this now first step that I would like to do is prepare the Json for our app right so I'm going to create a new folder over here and as I mentioned in my previous video your file structure your clean coding abilities all of these are measured during these interviews I'm going to create a new folder called Data and inside of this I'm gonna create a new file called folder data dot JS because the way you code during this coding interviews shows how well you can create a scalable application and a code that others developer can read as well so now instead of it I've actually prepared a Json already so I'm gonna import it and then I'm gonna explain so here's the Json that I prepared during the interview I have added a key for ID for name for checking if this is a folder or not and then the items which will contain more files and folder nested inside of this object now if you go inside this you can see we have similar pattern again ID name is folder so this one is a folder okay this one so this one is not a folder its folder is false and similarly other files and folders so this is just the Demi data that I have created that I showed you at the beginning this was the data so now let's go on and render this at first this might seem a little easy but it's going to use a very important data structure concept so if I go to app.js I'm going to create a new state for our data so use state and you can see I've imported use state from react so what user state does is it returns us two things inside of this array it returns us the actual State or the variable which I'm gonna name Explorer data and other variable is to change that state so set Explorer data and this right over here takes the initial value of our state so initial value will be this thing Explorer so let me import this real quick import X plorer from data folder data cool and I'm going to provide it to this use State let's check if this is working fine I'm gonna console log this let's check the console yep we got all of the Json data over here now what I'm gonna do for rendering all of those folders and files I'm going to create another component called folder.js so for that component I'm going to create a new folder called components again you don't have to do this but this shows that you can write a clean and more understandable code and as you can see we have the similar UI over here as well when you click on new file it's going to add this new file folder if you could create directory it's gonna add this folder icon over here so this is the exact UI that we are supposed to create so I'm gonna create file called folder dot JS and now inside of this I'm going to create a new component called folder and this will take a few params so I'm gonna just leave this curly brace open over here this will destructure all of the params that we sent to this component I'm going to discuss that in depth when we import this component inside of this simply I'm just gonna return a div for now saying hello cool now let's import this but we are supposed to export this as well export default folder now instead of our app.js inside of this div I'm gonna import that folder as you can see it has been imported Auto imported and now I'm gonna send this Explorer data to this folder component so I'm going to say Explorer equals explorator so this basically we are passing down this state as a prop so this is a very important interview question as well in reactive interface what is the difference between State and a prop so you can explain it this way so we are passing down this variable and when we go inside this folder there are two ways to receive it over here either we can write props and then we can restructure this prop or we can directly restructure it like this and we can receive this Explorer data let me just console log it over here quickly just to see if it's working fine let me remove that from here let me clear this out and yeah this is being rendered awesome now inside of our folder.js let's start creating our UI also there are some default styling I believe let me remove them real quick so before printing the complete folder structure of complete folder tree I'm just gonna print one level first because this is what I recommend you should take the problem you should break it down into several small small parts and then tackle one problem at a time so I'm just gonna div give this some basic style first of margin top to be 5 pixels and now inside of this I'm gonna have another div which will contain our Explorer's name or our first file or folder name so I'm going to say Explorer dot name see yep root is printed over here cool and also since this is a folder I'm just going to provide this a folder icon now after this we're gonna have to print everything that is inside of this folder that is inside of this one single level also I'm gonna wrap this inside of a span because inside this tip we're gonna have more things like buttons so I'm just gonna take care of that later but I'll just add it inside of a span now below this div I'm gonna have another div inside of which we're gonna render all of the items so as you can see inside of this we have three items so we're gonna render that over here Dave I'm gonna say Explorer dot items dot map and inside of this we're gonna simply say so if you see this item has a similar data structure as the parent right so inside of this this these also have Name ID and is folder so I'm just gonna print the name for now X blue I mean sorry not Explorer so I'm just gonna give this name of EXP and I'll say exp.name awesome so yeah we you can see over here we have all of these three first public then SRC and then package.json all of these three items have been rendered over here so this is just the folder that we have rendered right but what if this first one was a file then what would we do so before this I'm gonna put a check if Explorer dot is folder only then we're gonna print this else we're going to add a else after this return another span with the icon of a file so how you can get these icons is you can press Windows key plus semicolon if you're using a Windows laptop or computer and in Mac you can press the options key so over here I'm just gonna say yeah this is the file icon I'll say Explorer Dot name same thing this should be wrapped inside of a curly brace cool so we have rendered the first level also I'm just gonna give these both div some class name folder and this is gonna have class name of so okay fine so our first problem was to render at least one level of this Json right now our second problem is when we click on it this should hide and when we click on it it should show right so for that I'll create simply a new state over here by importing user state and I'm gonna name it expand and set expand by default this will be false so it will be hidden over here I'm just gonna say style and I'm gonna give this a display Style and I'm going to check if expand is true then this should be display block else this should be display none like that so currently it was false so it got hidden and whenever we click on this folder icon we should make it true so on click set expand to true let's see awesome so this is working fine also this should be true this should be not expand so that we can close it when we click on it so yeah awesome this is working fine so great our second problem is also been taken care of also we're supposed to indent it to a little bit right side so I'm just gonna give this some padding right of 25 oh sorry padding left my bad yep that's right so now you might be thinking how are we gonna render it infinitely right and that is exactly what I thought during the interview that what am I going to do now so I thought okay let's try calling this component again also I was a fresher back then by the way so I had no idea how am I gonna do this so I thought okay let's try to call this folder again so what I did was so I called this folder over here and this needed this Explorer prop so I at the Explorer and I provided it with this exp because this is the same UI as this component is rendering right so I thought maybe this will work let's try to provide this so I did and when I opened this I was in a complete shock I was like how the did I do that so pretty cool so the only thing that's left over here is some styling problems some styling issues over here that's not a big deal I'll be able to solve that so I was really happy and I guess that was the end of that interview let me just tile these quickly first also I need to provide the key over here so key will be exp dot ID I'm going to go to styles.css and I'm not gonna go much in depth into the Styles because this is not about that this is more about the functionality so let me just quickly add these Styles so here it is here's some the basic style that I've added I've added some folder styles with some background color display Flex justify contain space between because we're gonna have a button that's gonna have on the sides of this div so that's why I've added justify content space between some padding some width some cursor pointer right and for this particular root text I've added the span styling for the ma for some margin which is some left right and bottom Styles and for the files I've just added display flex and flex Direction columns so that we can see all of them one below the other and some margin and some padding and now now is the time for the real deal now it's time to move to the advanced functionality now it's time to create two buttons and the functionality for creating a new file or folder but before that if you are preparing for a front-end interview and you would like me to help you in a front-end interview preparation you can click the link in the description down below and book a one-on-one call with me I'm gonna give you proper roadmap tips tricks and a lot of valuable resources that will help you tackle your front-end interviews and also if you feel like you are already prepared for a front-end interview but you would like to have a mock interview with me click the link in the description down below and book a call with me and hurry because there are very limited slots all right now after this explorer.name I'm gonna add two buttons first one will be for adding the file and other one will be for adding a folder so I'm going to have our Dev answer this I'm gonna have two buttons first one will say folder plus and other will say file Plus or I think you can add some icon over here as well that will probably look better but I'm just gonna go with this let me just style them real quick and get that out of the way just gonna add some font size and some background color that's all okay now what I'm gonna do I'm gonna create a new state use state and this will be for showing or hiding our input box so I'm just gonna say show input oops not over here and you may have noticed I'm putting this as capital over here for whenever I'm writing set show or like set something because it's a good coding convention to write it this way and the initial state will be it's gonna have two things gonna have an object so it's gonna be visible so by default it's obviously not going to be visible so visible false and if it's a folder or file so is folder and I'm just gonna say null by default because obviously when we click on this we are supposed to track if we are adding a folder or a file right so that's why this key now whenever we click on any of these so first of all there's one big issue over here that this is opening this up we don't want that so what I'm going to do is I mean we do want that but we want that to be opened in our way so I'm just gonna add a stop propagation on this buttons so I'm just going to create a new function over here const handle new folder and this will take event and I'm going to say e dot stop propagation and Trigger it on click of these so on click the handle new folder and I'm just going to pass the event from here to there then this file as well so yeah this is not expanding this anymore great so now what I'm gonna do inside of this handle view folder first of all I'm gonna say set show input visible is going to be true because we want our input box to show and if this is a folder or not we are supposed to get this from there so I'm going to add this s folder variable and in folders case I'm going to say it's true and in files case I'm going to say it's false so now we're supposed to add an input field actually over here right inside the folder that we are supposed to add a file or a folder so I'm gonna go inside this div over here and above this I'm going to add a condition show input dot visible if this is true and answer this I'm gonna add a div with the class name of input container and inside of that we're gonna have an icon to check right so if I click on this you're gonna see that we are going to have a folder icon if you click on the file we're going to have a file icon so over here we're gonna check if show input dot is folder then we're going to show the folder else we're going to show the file and below this we're going to have an input tag with the class name of input container underscore input let's try to click on this oh okay we so we are not opening it by default currently so if I click on this it's going to add a folder if I click on this it's gonna add a file right and also we're supposed to add this functionality that whenever we click on this this should come up with Focus inside of this input tag and when we click out of it this should disappear because obviously we didn't save the file right the file will only be saved when we click enter so let's take care of that so over here I'm gonna say first of all autofocus so that this comes in the focus let me just put the type as well first and on blur so whenever we click outside of it they should go away let me just take care of this functionality first so on blur we're gonna say set show input and I'm gonna say whatever that's inside of it so show input and I'm going to change visibility to false like that so if I click on file yep you can see it the focus is inside of it when we click outside of it it's gone so outside it's gone click on it it's there outside it's gone awesome and also we're supposed to add some styling to this and whenever we if this is closed when we click on this that should open and show us this input tag so over here I'm going to say set expand to true let's see this works if we click on it yep it expands it and shows us our input field great let me just add some basic styling for this so so input container will be display Flex align items to the center and gap of 5 pixels between them so between these some for the span I'm gonna add some margin top so that this Gap looks better and for our actual input I'm just gonna add some basic margin padding and display properties that's all so cool let's get back to our app and again as I mentioned I'm not going very in depth in this CSS it's because this is not the whole point of this app the interviewer was not evaluating me on my designing skills he was evaluating me on my logical skills now whenever I press enter I should be able to add a new folder over here so let me just create a new function for this first so const add new folder or maybe better naming will be on add folder I'm going to take an event over here and I'm gonna check for the enter event so how do we check for the intervent so I'll say if e dot key code if the key code is 13 that means that's enter and we have something inside that input field so e Dot Target dot value only then we're supposed to do whatever we are supposed to do so first thing first we are supposed to close this input tag right so I'm just gonna say set show input and take whatever that was already inside of it and I'm gonna say visible to false but before this before doing this also I've put this in parenthesis this should be in the curly braces before this we have to add the add logic over here then this thing so let's try it out if I press on this and enter something and press enter nothing happened oh obviously because we are not calling it over here so I'm supposed to say on key down I'm gonna call this on ad folder okay let's try that again if I enter something press enter cool that's gone fact didn't enter anything press enter nothing will happen if I click outside then it will go away all right so that is all for our basic functionality and our UI now is the most important part and that is writing the algorithm for creating this logic and for adding that functionality I'm gonna create a custom hook yes I'm gonna show you how you can create a logic and add it inside of your own custom hook and then use it inside of your all right pause if you're not yet following me on Twitter go to twitter.com underscore Eon or click the link in the description down below and hit that follow button right now I'm waiting for you I'm still waiting okay fine let's continue with the video so first of all let's discuss what's gonna happen over here so over here as you can see we have this root and we have an array of items inside of it right and then when we click on any of this item or a folder item we have more items inside of it so this is basically a tree data structure right we can't just iterate on it in a linear way and add wherever we want to add it so this is going to require some tree traversing algorithm and whenever we find that particular node we are supposed to add our element inside of that particular node so let's see I'm just gonna start easy now just by creating a folder Hooks and insert this folder I'm gonna add a new file it's called use Traverse tree dot JS and inside this I'm going to create our hook and I'm going to name this hook use Traverse tree and as you might know that all of our hooks should start with this use keyword so that's why I'm using this use keyword over here and then I'm supposed to export it export default use Traverse tree just like that and now this hook will contain another function called insert node so function insert node and this is going to be empty for now and I'm going to return this insert node just like that so that we can if we need to create more such functions we can create it over here now how many things is this insert node going to take first of all this is going to take our complete tree it is going to take the ID of the folder inside of which we are supposed to create a new file or folder it's going to take the actual item that is going to be created and the fourth thing is is what type of item is it is it a file or a folder so it's going to take is folder as well as we go inside of it I'm gonna first check is the very first node the place that we are supposed to add our new item so this is me checking for the edge cases so I will say if tree dot ID is equals to folder ID and also if this is a folder or not tree dot is folder if it's a folder only then we are supposed to insert anything inside of it right and obviously this is not possible when we see our UI we don't have any folder or file icon in our file but just in case any drunk developer develops such a feature that we are supposed to add inside of a file as well so we we should take care of all of that thing inside of our logic so if that's the case if we are supposed to add this inside of our root then we're gonna simply say tree dot items Dot unshift so what is this unshift so unshift is just like push push adds the item at the very last but unshift adds it at the very first place so inside this I'm gonna have an ID a name is folder and the items array so the ID for now I feel like you should use something like uuid to create a unique ID or whatever you'd prefer but for now for the interview sake what I did I used new date because it's gonna give me some unique number so new date dot get time like that and name is obviously this item that we are supposed to create just like that so this will work for one level let's just go and test this out before moving forward so I'm gonna go to my app.js I'm gonna call that hook over here use Traverse tree and as we already know it's gonna provide us insert node right so this is what we're supposed to use over here now I'm going to create a function over here for inserting the node which I'm gonna in turn send to our folder component so I'm gonna say const handle insert node and this will take few things it's going to first take a folder ID it's going to take item and it's going to take if it's a folder or not and inside this we're going to Simply say const final tree is equals insert node and we as we already know insert node takes to four things so first one is the actual tree that is our Explorer data second is going to be and all of these three simply just like that and then when we have our updated tree don't worry if you are not able to understand this properly I'm just gonna go through it once again after I'm done with this so after we have our final tree we're going to update our original tree final tree just like that what's wrong with this Traverse tree is not defined okay we haven't imported it yeah import Traverse tree from hooks great let's pass this function down to our folder component like that inside the folder I'm going to receive that and now wherever we are supposed to add the logic I'm going to call it with those three things first folder ID so current folder ID is Explorer dot ID and then the current item that is e dot Target dot value and then the is folder if it's a folder or not so that will be inside of over here show input dot is folder I think this this should work let's see let's test this out for the root I'm just gonna test it out first because obviously we don't have any other use case right now so for this I'm just gonna say hello press enter okay uh oh wait a minute uh I think inside of it I was also supposed to return yeah insert this function yeah I was supposed to return the complete tree so I modified the tree right so I was also supposed to return that tree so that's why I think let's give this error let's let's test this out to demo.js enter oh awesome it's working so hello enter fine that work let's create inside of this folder hi press enter no obviously this is not going to work because this is a nested folder right and we didn't write the logic for the nested folder yet so let's go inside of our use Traverse tree again and after this logic and this return will go inside of over here not here because this is only satisfying this condition right only the first one now after this I'm gonna Loop through the complete remaining tree and I'm gonna follow an algorithm called depth first search so what's depth first search it's gonna take the root folder first then it's gonna go inside this public folder then it's going to go inside is public nested and this is gonna check all of these if it doesn't find that then it's gonna come out it's gonna go and start this SRC it's gonna check all of its files so one by one it's gonna go inside the depth of this tree and check each and every file or folder that if it's ma if it matches with the ID of this folder ID and right over here I want to talk to those people who always say that no DS is not used in the real world and we don't use this in the development in our daily basis so here's the live example for you all that DS is indeed used while developing such features so now whenever someone tells you that DS is not used in real world just show them this example so all right after this what I'm gonna do I'm gonna take this and I'm going to Loop through all of its child so I'm gonna say tree dot items dot map I'm gonna take the object over here and I'm gonna say return and what I'll do over here is since I'm supposed to Loop through all of these so this will just be one iteration right only for this one but I want iteration for each and every one of them so what I'll do is I'm gonna recursively call this insert node I'm gonna call this insert node again so what's going to happen then is just similar to what we did to our tree so it's gonna call this insert node on this public folder then now then when we go inside this public folder it's the same story now this tree will be just this part over here only this part will be the part of this tree variable so then it will it's going to go inside of it and it's gonna check okay tree dot ID equals to folder dot ID are we supposed to insert it inside this public folder is if that's the case then we're going to insert it and return the tree if that's not the case then again it's going to come over here and it's gonna make this tree as its primary tree and then it's going to check and so on so it is this this cycle is gonna repeat itself until this finds its destination and adds the file inside of that place or folder so I'm gonna say insert node and I'll add object folder ID because object will be this one and this is what we're supposed to send it inside of it right so object folder ID and folder ID is just going to be the same obviously every time so we're going to pass it in each iteration the item and if it's folder or not just like that and we need all of this result to be stored inside of a variable right so I'm just going to create a variable called latest node and after each and every iteration we're gonna return this latest node after let's say if this had the folder ID that we're looking for so what we're going to do we're going to modify it and we're gonna return it again so we're gonna say return latest note but the problem over here is this latest node is an array so as you can see over here tree dot items dot map also I'm supposed to assign this latest note so latest note is an array right but our original data structure was an object so what this will return to us is just this part um inside the data just this items part and not the name and is folder an ID of the parent so what we're supposed to do is so it's not returning us this part right we're supposed to say our tree the original tree and then inside the items we're gonna add the latest node if you didn't understand let me just explain it once again for each and every iteration let's say if you are inside this root folder we're just gonna check the name of the root folder over here and for its children's we're going to Loop through this items over here and obviously this since this is a map this is going to return as an array so I will take that array we're going to add it inside of the items because it's a high chance that it may have found it inside of this items variable and that's why I'm updating this item so yeah I think that's what it is Let's test this out let me go inside this public folder click on over here I'll say new folder press enter handle insert node is not a function okay I think we're supposed to yeah obviously since we are passing it down from app.js to our folder.js we are every time supposed to pass it back to the folder right so we are calling folder over here so we're gonna have to pass it right over here else it won't detect it okay now let's try it out if I click on over here say hello press enter awesome so this is working absolutely fine let's try to add the file new file new file.js enter great everything is working fine as expected and that is it for our question now I have some homework for you so if you see over here we can add the files and folders but we cannot delete it right or we cannot update this name of the file or folder right so what I want you to do I want you to have an update and delete icon over here and then I want you to add the functionality inside of this custom hook so just create delete node similar to this in insert node and same for update like this and obviously you're supposed to export it over here as well so this is one homework and the other homework is that this algorithm is not perfect this can be optimized by using dynamic programming so I mean this is not the absolute compulsory task for you but if you get a chance I would highly recommend you go and try to optimize this algorithm by using dynamic programming and let the others know in the comments down below how you added these functionality and if you would like for me to create a part 2 for this video where I explain this dynamic programming algorithm for this insert node and this delete and update functionality I'm gonna need 1000 likes on this video for that if you all are able to do this I'm gonna release a part two for this video and also click the link in the description if you want to book a one-on-one call with me and if you want to access this complete playlist the complete machine coding interview series playlist link will be in the description down below as well

Channel: RoadsideCoder

Views: 69,186

Keywords: react interview, react interview questions and answers, react interview questions, frontend interview questions, front end interview questions github, 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, google interview experience

Id: 20F_KzHPpvI

Length: 35min 26sec (2126 seconds)

Published: Sun Nov 20 2022