🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details ➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder 🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/
Up until now i am thinking i know a lot i mean i know all the thing taught in the video but i never actually tried to write a good code and implementing concepts like event propagation ,custom hooks. There's still a lot to learn Keep the the good work man
These kind of questions are very common in tech interviews and are also very interesting, (in one of the interviews I got to build a company-team-employee relationship which looks like an infinite tree structure and at the advance section I need to add a functionality that a team can fire/add an employee and similar for company-team relationship level -> time bound is 90min 🙃) I would Like to know your DP solution 😌, thanks for sharing your experience 🔥😎
In DE Shaw - Frontend interview I got similar kind of question, but bit advanced If you do double click on any folder you can rename the name and we can add multiple files inside the folder and we can add new Folder in parent directory and we can also delete files / folder
If you are inserting on the first level then state would be mutated instead of being created new , which is advised in react docs. Please check or point out if am wrong. Apart from that amazing video.🙂
Explaining what one learns is a high level skill altogether and you ace this skill. May you have more success than what you currently enjoy going ahead!
giving marginTop and marginLeft to both files and folders options would have done it for all, the amazing recursive solution is handling everything very crazyyy !
Brilliant Content and Amazing Walkthrough of the code. The fact that you think of the problems and tackle it into smaller sub problems is really appreciated. Bring more such machine coding problems 🔥
A few questions: 1. Why to use a custom hook over a util function to insertNode in the tree? Since according to my understanding custom hooks has to be a "utility react component" 2. Should we deepcopy the actual tree and send that copy to the insertNode function to be cautious of any updations to the actual state (although it won't but we should always copy the state into new variable right?) 3. Please share the DP solution whenever possible 🙂
Sir why to use spearate hook with dfs for addig folder or file ? Can't we juat add extra folde or file at the position where we pressed enter key in the items folder ? It is working in my code that's why ...
Want to see more such machine coding Interview videos so that I can make some good projects for interview and sharpen my web dev skills. Great great job big brother
in insert node function if we want to add folder to public then it will traverse rest of the folder also. we can stop if folder is added not to traverse rest of the folders. latestNode = tree.items.map((ob) => { return insertNode(ob, folderId, item, isFolder); });
It is really cool video, but I don't understand how could you use Folder component inside the Folder component. I got an error: ReferenceError Folder is not defined.
can't we call the creation of new file/folder in Folder component itself? because it already knows which item is being clicked upon via button click, so we can push the item in array from there only. // Folder component const Folder = ({ folder }) => { // called on enter of input field. const addNewFileFolder = () => { folder?.items?.push({ id: 10, name: inputValue, isFolder: showInput?.isFolder, items: [], }); } };
Why cant we just store individual folder data separately in a Map and just render the files and folder in it using the folderid? To add a new file all we have to do is push to that particular folder in O(1) . Similarly, adding folder will be adding the folder id to parent folder and adding a new entry to the Map. Why didnt we use that approach ?
Can you also share in real interview how would you go about thinking of structure of data like the JSON data you use - wouldn't this require thinking all the possibility of data required and hence first completely thinking about the structure of the app ?
I am a full stack developer (Reactjs, Nodejs MySql, Mongodb) with one year of experience at a service based company. I am looking for a frontend role specific job in a product based company.
As we already have the reference to the object and items so cant we add directly to the items the new folder of file instead of looping and find. can someone explain?
Hi Piyash, please let me know how can we achieve this in JavaScript. const arr = [1,4,1,2,5, 2,5,2,3]; Then the sorted array should be like below const output = [4,3,1,1,5,5,2,2,2];
not getting the problem statement itself if occurrences are same then push the larger one first e.g occurrence of 4,3 is 1 so we pushed 4 first as it is larger than 3. The occurrence of 1,5 are 2 so according to previous statement 5 should have been pushed first no ? output=[4,3,55,11,222]? Please correct me if I'm wrong
If you simply use setShowInput({ visible: false }), it would replace the entire showInput state object with a new object that only has the visible property. This would cause you to lose any other properties in the showInput state, such as the isFolder property. (...) update the state while preserving the other properties.
as express backend developer, what topics should i cover before the interviews , auth , tokens , hashing , restful api and database , is there anything else should i study?
I was also looking for the same thing. In my opinion, we can use the native window.structuredClone() function to make a deep clone the state object first then we can mutate the new duplicated state variable in the functions.
@@nishantmoolya yes it gets updated!! when you loop in the file just pass the reference of the current object and then update it as required. that's it
how to make table Data shorting This is my Interview question With MNC ... // on first click list will sorted in assending order // on second click list will be sorted in descending order // on third click default list will be rendered // on fourth click again start form step 1
Yes DSA is used, but only basics, not those wiredo leetcode problems, most of the times where intense dsa is needed, those things are done by DSA specialists
Sir ,love the way you taught us but can you give some intuition and insight before directly jumping to coding part so we can think about how we should approach for the solution
Great video! Can you share the codesandbox link? Also, if possible please make more videos with real world use cases of DSA. Maybe then I can finally convince myself to get on that Leetcode grind one day xD
🔴 Get my Complete Frontend Interview Prep course - roadsidecoder.com/course-details
➡ Book an Interview Preparation call with me ( 20% OFF for limited time ) - topmate.io/roadsidecoder
🟪 Follow me on Instagram and u will clear your interview 🤓 - instagram.com/roadsidecoder/
Make more such interview questions on react js this is really great sir
Bro please make part 2 I think like target has been achieved
hi there, i'd like to know how would you perform searching for the file and folder in nested folder structure , please add it in 2nd part of it
Haven't seen this kind of briliant content on UA-cam. Keep it up
Thanks a lot! Please do share with other!
Up until now i am thinking i know a lot i mean i know all the thing taught in the video but i never actually tried to write a good code and implementing concepts like event propagation ,custom hooks.
There's still a lot to learn
Keep the the good work man
Thanks man
I don't understand why there are so less likes on such a great video. So informative and helpful for interviews. Keep up with such content!
💙
These kind of questions are very common in tech interviews and are also very interesting, (in one of the interviews I got to build a company-team-employee relationship which looks like an infinite tree structure and at the advance section I need to add a functionality that a team can fire/add an employee and similar for company-team relationship level -> time bound is 90min 🙃)
I would Like to know your DP solution 😌, thanks for sharing your experience 🔥😎
Can you please share you problem's solution.. also if you applied DP as well
In DE Shaw - Frontend interview
I got similar kind of question, but bit advanced
If you do double click on any folder you can rename the name
and we can add multiple files inside the folder
and we can add new Folder in parent directory
and we can also delete files / folder
If you are inserting on the first level then state would be mutated instead of being created new , which is advised in react docs.
Please check or point out if am wrong.
Apart from that amazing video.🙂
Explaining what one learns is a high level skill altogether and you ace this skill. May you have more success than what you currently enjoy going ahead!
Wow, thank you for such awesome words brother!
Amazing Revision Thanks a ton! very simple and excellently explained!
1000 likes are already done , we are waiting for part2 of this (dynamic programming , edit and delete)
Thanks for reminder, I'll plan the next video!
@@RoadsideCoder thank you
Hi Piyush - It might be slip through cracks , as time permits request you to release part 2 of this Edit and Delete part
giving marginTop and marginLeft to both files and folders options would have done it for all, the amazing recursive solution is handling everything very crazyyy !
Brilliant Content and Amazing Walkthrough of the code. The fact that you think of the problems and tackle it into smaller sub problems is really appreciated. Bring more such machine coding problems 🔥
find more such questions here - roadsidecoder.com/course-details
You can wrap input inside html form element can listen for onSubmit event
And browser will handle enter button click and form
i was really thinking that how vs code folder works and you dropped a video, Thanks a million for this wonderful video💖💖
Keep uploading these kind of videos...very informative and helpful. Keep growing ❤️
12:17 was shocking for me as well😮
A few questions:
1. Why to use a custom hook over a util function to insertNode in the tree? Since according to my understanding custom hooks has to be a "utility react component"
2. Should we deepcopy the actual tree and send that copy to the insertNode function to be cautious of any updations to the actual state (although it won't but we should always copy the state into new variable right?)
3. Please share the DP solution whenever possible 🙂
Thank you for these videos/tutorials. Where is part 2 of this video on dynamic programming ??
Sir why to use spearate hook with dfs for addig folder or file ? Can't we juat add extra folde or file at the position where we pressed enter key in the items folder ?
It is working in my code that's why ...
may all the good things happen in your life.
It was really cool, how did you insert folder icon next to element inside JavaScript file itself, please share with us.
PC - Windows + ;
Mac - Fn key
@@RoadsideCoder for Mac, Fn key with which key ?
that's it
1k likes already completed, plz bring the part 2 of this video
I was think of using a priority queue so that the files and folders are in a sorted alphabetical order.
Want to see more such machine coding Interview videos so that I can make some good projects for interview and sharpen my web dev skills. Great great job big brother
Thanks 🙏
are bhai Saturday ko hi release krte, Sunday Evening is kind of relaxing!
At 12:20, same reaction 😂😂😱🔥😎 then thought ki abhi kuch nhi aata apne ko abhi bahut kuch seekhna pdega 😂
I really love this video and the concept of this unique one.👏👏
Thanks ❤️
Please make second part of this video. Thanks
Amazing! Eagerly waiting for 2nd part
What the hell man, this is real react Bro 🔥🔥🔥
in insert node function if we want to add folder to public then it will traverse rest of the folder also. we can stop if folder is added not to traverse rest of the folders.
latestNode = tree.items.map((ob) => {
return insertNode(ob, folderId, item, isFolder);
});
It is really cool video, but I don't understand how could you use Folder component inside the Folder component. I got an error: ReferenceError Folder is not defined.
can't we call the creation of new file/folder in Folder component itself? because it already knows which item is being clicked upon via button click, so we can push the item in array from there only.
// Folder component
const Folder = ({ folder }) => {
// called on enter of input field.
const addNewFileFolder = () => {
folder?.items?.push({
id: 10,
name: inputValue,
isFolder: showInput?.isFolder,
items: [],
});
}
};
Tysm bro.... I wasn't able such stuff in my project.... thanks..!!!
Make more such interview questions on react js this is really great sir
recursion wala part. mind blown
This is great explaination. We need part-2 video.
Wow beautiful. Recursion thing works here !
Why cant we just store individual folder data separately in a Map and just render the files and folder in it using the folderid? To add a new file all we have to do is push to that particular folder in O(1) . Similarly, adding folder will be adding the folder id to parent folder and adding a new entry to the Map. Why didnt we use that approach ?
Can you also share in real interview how would you go about thinking of structure of data like the JSON data you use - wouldn't this require thinking all the possibility of data required and hence first completely thinking about the structure of the app ?
I am a full stack developer (Reactjs, Nodejs MySql, Mongodb) with one year of experience at a service based company. I am looking for a frontend role specific job in a product based company.
Bro the problem was same and what you experienced same I did, even I was shocked how did it recursively call the component 😂
This type of question was asked to me when I was giving interview for Value labs.
We dont need to traverse the ree to add element we can use reference variable to push the children and then we can force render react component
But will that update the explorer object?
Such informative and easy to understand videos you make!
Thank you 😊
Welcome ❤
Instated of Json file , i would like to upload files and display as file explorer. Please give me the code if you have
Great Video !! Looking for the part two now !!
I got this question in an Interview. They asked me the same to do in vanilla javascript.
You promised another video on this after 1k likes and ur video already has 2.6k likes
Please uploading the continuation video
Nice video, you have the explorer reference, i don't think we need the useTraverseTree hook.
As we already have the reference to the object and items so cant we add directly to the items the new folder of file instead of looping and find. can someone explain?
Sir, are such questions asked from fresher too?
Hi Piyash, please let me know how can we achieve this in JavaScript.
const arr = [1,4,1,2,5, 2,5,2,3];
Then the sorted array should be like below
const output = [4,3,1,1,5,5,2,2,2];
this is one of the interview questions
Using map to count the each value,
And push it array with counted value, and print it
not getting the problem statement itself if occurrences are same then push the larger one first e.g occurrence of 4,3 is 1 so we pushed 4 first as it is larger than 3. The occurrence of 1,5 are 2 so according to previous statement 5 should have been pushed first no ? output=[4,3,55,11,222]? Please correct me if I'm wrong
@@syednaqvi6572to my knowledge it's wrong
Can be done with 4 nested "for " loops😅
Isn't tree.items.unshift() mutating the original react state?
same question man. I think it does too.
Why did you destrustured showInput at @18:35 inside setShowInput? (setShowInput({...showInput, visible: false}))
If you simply use setShowInput({ visible: false }), it would replace the entire showInput state object with a new object that only has the visible property. This would cause you to lose any other properties in the showInput state, such as the isFolder property.
(...) update the state while preserving the other properties.
Can you build `n level comments` app for mahine coding? Kindly bring something like this.
bhai what should i do to get interview from big tech company for react js developer
as express backend developer, what topics should i cover before the interviews , auth , tokens , hashing , restful api and database , is there anything else should i study?
Hi,
In use-traverse-tree hook, isn't it wrong to mutate the state directly by doing tree.items.unshift ?
I was also looking for the same thing. In my opinion, we can use the native window.structuredClone() function to make a deep clone the state object first then we can mutate the new duplicated state variable in the functions.
what about DSA in presence of Chatgpt? 29:40
Superb content , thanks a lot :)
Don’t you think useTraverseTree is an extra added complexity?😅 You could’ve used folder object reference directly🙃 then and there.
exactly I did the same
@RoadsideCoder please ans if we missing something
@@silverbullet_6 what approach did you use? can you explain ?
@@anuraggharat5453 adding a new folder using the reference passed in every folder component
@@silverbullet_6 can u explain in more detail and is the UI gets updated by this method?
@@nishantmoolya yes it gets updated!!
when you loop in the file just pass the reference of the current object and then update it as required. that's it
Would there be much difference doing this with TS?
What is the interview process at Microsoft for Frontend Engineer roles?
how to make table Data shorting This is my Interview question With MNC ...
// on first click list will sorted in assending order
// on second click list will be sorted in descending order
// on third click default list will be rendered
// on fourth click again start form step 1
Great project. Thanks for sharing
Bro can't we just do this with Redux or Zustand instead of custom hook??
I have live coding test tomorrow on javascript and react js what questions I can expect please reply 🐸
Mostly logical
Todo app in react with conditions
Yes DSA is used, but only basics, not those wiredo leetcode problems, most of the times where intense dsa is needed, those things are done by DSA specialists
Why this tree is not getting affected by pass by reference?
Sir ,love the way you taught us but can you give some intuition and insight before directly jumping to coding part so we can think about how we should approach for the solution
Ok bro, I'll keep that in mind now!
@@RoadsideCoder 😍
you are boss of frontend
this whole playlist is cool
can you please give hint about applying dp on this problem
good lesson, thanks for you work
Bro please make more machine learning videos best work, and great contributions for new devs
Definitely!
how were you able to think this at the time of interview , I won't be surprise if I forget for loop one day in the interview 😂
I was also surprised 😂
Hi , How do u open browser tab in VS code?
Oh boy, I still need to learn a lot.
Great video! Can you share the codesandbox link? Also, if possible please make more videos with real world use cases of DSA. Maybe then I can finally convince myself to get on that Leetcode grind one day xD
Github link is in description
Can someone explain how the Folder can be called inside the Folder itself?
12:20
I haven't heard of this concept before.
It is called Recursion,I have made a video on this concept as well -
ua-cam.com/video/DICBCBZn_L4/v-deo.html
By creating files inside HandleNewFolder, you are violating SRP.
Thanks your content. Can you make a big project based on typescript redux toolkit.
what mic do you use bro ?
did you had a round in cars24?
Waiting for Dynamic programming algorithm.
nyc brother make some interview questions on react
Surely!
Part2 please
We are waiting 😍😍
it's really cool broooooo!!!🔥🔥🔥🔥🔥🔥🔥🔥🙇🙇
Thanks for masterpiece.
Great content and explanation.
Glad it was helpful!
I got this question in citizens bank interview
What a interesting and useful video, thanks Piyash a lot! More kinda react videos please! 🔥🔥
so basically it is kind of recursion going on where map will loop inside that again map loop and its goes on...
Yep
Pakka test! Tnx
Please make videos on these-
Comment system
Kanban Board
Pagination
Carousel/Slider
Thanks a lot for suggestions
Mind Buzzing.
How did you get the folder icon @piyush at 7:50
press windows+. and type folder to get that emoji
This is easy way , try to make directory with depth of each node