Solving a practical intermediate react interview challenge

[@pepperdayjackpac4521]

I watched this video entirely in my bed, and now I plan on practicing this for myself once I get out of bed. This was very interesting and helpful.

[@manusartifex3185]

LMAo me too

[@timibolu]

Same here

[@AjithKumarsham]

Same 😅

[@mayowafalomo1399]

We all are living the same lives 😂

[@alanthomasgramont]

IMO you don't need depth. Your child list could be a containing and that could be styled with a margin. The is also good for screen readers, where would be a list and the would be a role listItem. Also, if you are using expanding content, accessibility needs aria-expanded set.

[@BeeBeeEight]

11:26 A suggestion, the element might work perfectly as it has its own dropdown. You can nest the children inside without having to depend on a toggle state and semantic HTML is a plus. Anyway, thank u so much for showing us how to tackle an intermediate react challenge. 😀

[@captainnoyaux]

Great suggestion, and it seems supported everywhere. You had something like that in mind ? function Entry({name, children}: TEntry) { return {children ? {name} {children && {children?.map(value => )}} : {name}} } I tested it and it does the job, no need for a button and such, great thinking !

[@Dularian]

I love watching you code man. I interned at a place last year using React and I was really bad at that. Watching you is making me want to try again with front end.

[@WebDevCody]

Give it another try!

[@theantibeta]

You don't need depth prop, with ol > li and padding does works

[@aamiramin6112]

This is so informative and real-world use cases like recursion, rendering, etc. Thanks alot for sharing.

[@WebDevCody]

You're very welcome!

[@csy897]

Thanks so much! I was about to give up leetcode because I didn’t understand the need for data structures beyond maps and arrays like trees, stacks, heaps as a frontend dev. But you just showed an elegant solution with recursion. Gives me good motivation to study more!

[@skapha]

WDJ this is awesome! Please more of this kind of content, more challenges (intermediate to advanced)! The Essence!

[@TheLorepRocks]

I had to do a similar code challenge, but also I had to add an input next to every element in the tree after pressing the enter key the child should be added to the right tree level. I haven't received any feedback but looking at this video makes me feel like I did a good job! Thank you! :)

[@SaschaRissling]

THx for this. I'm prepping for an "open" react interview on monday where they just throw a problem at me and watch me solve it however i want.

[@WebDevCody]

You got this

[@brayancuenca6925]

Dude, love your videos. I always watch them before I go to bed to wake up first thing in the morning and practice on them 🤙

[@WebDevCody]

That’s a true fan!

[@BigKaTrob]

Nice, I like the way you handled the depth. This could also be done in CSS with a clever use of a sibling selector but I like the way you've done it here with js a little better.

[@mtiganik]

Button was not needed I think, could do the trick

[@JoaoVitor-gm2yf]

5:58 I think it doesnt really need to keep track of depth, just use margin instead of padding, so it renders the indentation in relation to the parent element

[@rowancodes]

This is actually great

[@kelechi.E]

You made this look super easy!

[@ChillAutos]

Nice video. This gives me a lot of confidence if this is intermediate / advanced. Im only about a year into my first dev job but I could pretty easily come up with a solution for this.

[@ikeoladarey7031]

Beautiful 👏. Clean and concise.

[@ikeoladarey7031]

Can see a lot of suggestions e.g. Using the key of the array instead of depth. Still great work regardless.

[@mirozxl]

Never was a person to comment on a youtube video, like or share it. But these types of coding for intermediate react js interview qsn made me do all those things.

[@renatoAllArt]

tks dude, u help a lot with this code challenges series, i've never had think to use recursive code to render a component.

[@lofibeats2344]

This is some kind of content that is not available and really fun to watch

[@MrAlexVelik]

Thanks for the great content, as always, Cody!

[@mandalorian99]

im a mid full stack dev and still great to see someone eleses thinking process. Grat content!

[@bradaa2053]

for the styling of the button you can use something like -> button { all: unset; cursor: pointer; } then it will remove all the default stylings

[@setarose366]

These are the best! Please keep these coming!

[@EvilTim1911]

This was actually pretty straightforward, I expected it to be harder for an intermediate challenge. I feel like my imposter syndrome often acts up but most of these challenges end up being a breeze. Time to start applying for more senior roles I guess.

[@divyuesharma]

Loving this series and get learn something new before going to bed. 👍🏽

[@internetexplorer7880]

Thanks 🙏🙏... This is exactly what i was gonna work on and your way is so much simpler

[@eshw23]

Hey cody nice video! Next time for future code challenges can you maybe just give a bigger in depth explanation of the problem, with more examples, I didnt understand the problem at first or what it should look like(maybe im stupid😀), Thanks!

[@thewatcher3564]

Appreciate this video! Just been given a project at work to design a section based hierarchy like this (ex. 1.0, 1.1, 1.1.2, …). Now just need to think about how to create subsections under the parent that line up with backend

[@UltraKillpc]

Many things to learn here

[@jowarnis]

Awesome :D really enjoyed this!

[@flyinglow]

I think one optimization... it's possible without the nested mapping. Remove the initial mapping and pass 'entry.children' directly into then mapping there, while checking 'entry.children && ' to trigger the recursive. any who, thank you for this challenge! watched the video and jumped on the computer like "YOU CAN RECURSIVELY RENDER?!"

[@nikhilbhagat3832]

Amazing explanation

[@anil4real_]

more of these kind of videos please!

[@livetowin-pj7yl]

I don't even know where to start with kind of problem. Thanks for enlightening me. Though I know recursion and why you used it here, is it required to know DSA at this point?

[@memeproductions4182]

Little late lol, but you don't need to add 10 padding * depth for esch node, since every node has already the cumulative padding of the previous levels. Otherwise your children will have always increasing padding compared to the previous ones

[@gabrielfono844]

very good exercice thanks a lot

[@chezanagrofarm153]

thanks really helpful. for this video do you practice it beforehand or straight live coding? thats awesome if it is live coding

[@WebDevCody]

I just start with the idea and start coding

[@vanovasilyan3807]

Thanks 🤝💪

[@poloiaish6281]

Where do you get these react challenges? Or do you just randomly think about it or came across it

[@WebDevCody]

I just make them up

[@Eddie4k]

This was super helpful!

[@gabrielfono844]

I have a year 2months of experience as full stack developer and I just applied for a job that required 3 years of experience as frontend developer the phone screen was ok and they move me to the next role how do I prepare it in one week ? I will appreciate any advice here

[@WebDevCody]

Idk that’s a hard one. Fake it till you make it

[@xrli]

How can we adapt this solution to keep track of which sub-folder has been opened, and keep that state persistently, even though the parent folder has been closed and then reopened?

[@yahwehagape]

Instead of mapping over files in App component, just have a root Entry and when you nest it in App no need to reimplement mapping there.

[@dedavai]

Can bypass much of the react complexity by using and HTML tags

[@honournosa9129]

Awesome video

[@emmanuellmiqueletti7029]

how to do you switch to the browser behind the vs code and the mouse stays on the same position?

[@WebDevCody]

do you mean the built in virtual monitors mac os provides?

[@Ebiko]

this is interesting. Just recently i coded a Dynamically increasing tree. - to allow fetching additional folder data from subfolders and not loading everything at once. Used a "Path" Variable, splitted it by "/" and used a recursive function to recursivly call itself until the splitted path is empty, returning the data. It looks super weird in code. But i think i got a quite good solution.

[@zaynelovecraft]

Beautiful

[@rishilapsiwala9503]

Hi Cody, I tried to build a tree using recursion and I was successful, however when I implemented a search algorithm to filter in the tree. I faced this invariant violation- rendered fewer hooks than expected. and now I am not able to move forward

[@ParasProgramming123]

From.where do u find these questions is there any website for daily react js challanges

[@WebDevCody]

I usually make them up

[@ParasProgramming123]

@@WebDevCody will u make more like 30 days challenge from biggner to advance please it will help a lot for interview for a Fresher like me

[@markopolo2224]

very interested in this

[@ahmadhariri1092]

It would be more easier if you used the details tag of html, don't you think?

[@Paxters_]

Is vite better than yarn? or whats the diference between them?

[@WebDevCody]

They are different tools. Vite is similar to webpack and it’s used for bundling your code. Yarn is similar to npm and is used for managing project dependencies

[@zaynelovecraft]

What if files was just an array of objects instead of files being an object with the children key ?

[@rowancodes]

Is this consider intermediate/advanced? I believe there must be harder questions than this that are for begginers

[@cszqravr]

Yeah, this definitely is an very, very easy one. We would only use such an example if the candidate is super nervous to hand them a free win and move on to an actual coding interview. Even with that being the case, the shown solution definitely would be docked some points

[@medAmineRg]

thank you

[@IgnitedIce81]

Don't forget to add some maximum depth to prevent infinite recursion

[@golfgrab9481]

how to setup auto complete optional chaining?

[@golfgrab9481]

4:40

[@mythicalwraith7026]

How does the isExpanded && () work?

[@WebDevCody]

If isExpanded is truthy it’ll render the next part out to the screen

[@algorithmictoolbox6856]

This is what i was asked yesterday, and i solved it after the interviewer was gone

[@Genocidechaos]

Hi where do you get your practice questions from?

[@WebDevCody]

Other people and I make some up

[@Isfean]

I aspire to someday be a Frontend Developer (never applyed to jobs cause i didn't study cs and feel like I'm not enough).. and when I saw that this is Intermediate I feel like I'm already a "Senior" cause this looks pretty easy to me.. So my question is, how much should I ask for when I get an offer? :)

[@WebDevCody]

The intermediate is all relative. Your starting rate would probably be the average for your country and area for a junior dev if you never had a coding job. Again, these challenges are just to verify you can at least code and problem solve, there would still be a lot of questions and discussions that might happen before or after any coding challenge.

[@warzonehacks4915]

Can someone tell me where he used the recursion?

[@lazerhawk2192]

The function entery has a component entry that references the entry function. You can see that entry references itself. This is recursive as it will continue to call entry on the stack until there is no more children, which is our base case, and then we exit returning entry.

[@kalahari8295]

Nested drop-down list?

[@artistry7919]

There's an html tag called details that would've been better suited for this

[@Jupiter5001]

That's called accordion and it is an easy one

[@TheSourLemonz]

good one

[@gorkemeldeniz9579]

i think there is a tiny bug in your isExpanded logic.If u click the button all other files expanding ,in my opinion expanding state must be unique for all parent files and toggle it individually.

[@kris24_lawson]

I don’t see the bug, joi isn’t expanded when node_modules is expanded

[@gorkemeldeniz9579]

​@@kris24_lawson yes you are right there is no bug at all cause of the every time new component render and it has a prop individually

[@alexluu3615]

@@gorkemeldeniz9579 would you please go into more detail? I initially thought the same thing as your first comment.

[@gorkemeldeniz9579]

@@alexluu3615 if the parent component share expand state as a prop to children it effects all other child components but he make the statement in the children component therefore it does not effect each other all states are individual

[@alexluu3615]

@@gorkemeldeniz9579 thank you for your response and helping clear the confusion. best of luck to you and your coding journey!

[@SahraClayton]

Typescript does seem a lot of extra boilerplate and work

[@fen1x_fpv]

In small project sure it might seem so, but as it gets bigger advantages are far more visible

[@WebDevCody]

It’s useful, I promise

[@SahraClayton]

The problem is that I see a lot of videos where there is all this extends, typeof, generic, , and it all looks confusing. A good example would be the youtuber Matt Pocock, he is supposed to be a typescript wizard and he does all this stuff with it and it is a little daunting to us beginners

[@emreozgun3846]

@@SahraClayton Most of the 'generic sorcery' makes the code really hard to read for TS beginners but it shouldn't discourage you from utilizing structural typing in your codebase.

[@fen1x_fpv]

​@@SahraClayton ​Well ts typesystem is basically a new language on top of a javascript so you simply have to learn it to understand more complex stuff with generics

[@simonli8889]

13 min video to make that, probs a good hour for me😂 (I'm a beginner btw)

[@jggabayno]

hello bro, my question is out of the topic but does RTK still makes sense with NextJS 13 app directory? or any state management you suggest to be use?

[@WebDevCody]

I like jotai right now. Super simple to setup and share state between components.

[@samuraijosh1595]

this would be an easy problem for the average Haskeller.

[@WebDevCody]

Who uses Haskell?

[@samuraijosh1595]

@@WebDevCody Me 😭😭😭. Now I'm gonna cry alone

[@djoezi3662]

Amazing! Just speak a bit slowly and up please. Not only native english speakers watch you!

[@dcknature]

Get well soon, Web Dev Junkie 🙏🤗. Thanks for the video 🍉😉👍!

[@quterma]

nice

[@lillenk125]

123

[@ahmadmuslih]

Bro can you make better title?

[@McProski]

what's wrong with the title lol?

[@Maaaaars]

I think he's distrete with his titles to prevent people from easily searching for the solution when prepping for coding interviews.

[@WebDevCody]

What would you recommend the title being?

[@WebDevCody]

@@Maaaaars actually i didn’t think of that, but that’s a good reason. I figured having “intermediate interview challenge” would bring more views than “building a file tree viewer in react”. People like prepping for interviews, they don’t care about building a tree browser 😂

[@Maaaaars]

@@WebDevCody I actually got the File Structures problem from Atlassian lol. But, I like your titles. I actually search React Intermediate/Advanced interview problems then the actual specifics

[@Bempus]

I just wanted a simple mockup tree from an acual folder and came up with this in PowerShell, you do however need to pipe it to "Convertto-Json -depth 100" after to format it correctly. function Get-HTMLFileTree($dir) { $folder = Get-Item $dir $html = [System.Collections.ArrayList]@() $obj = [PSCustomObject]@{ name = $folder.name } if ($folder.Mode[0] -ne 'd') { $html.Add($obj) | Out-Null; return $html } $obj | Add-Member -MemberType NoteProperty -Name children -Value ([System.Collections.ArrayList]@()) $children = $folder | Get-ChildItem foreach ($child in $children) { $obj.children.Add((Get-HTMLFileTree -dir $child.FullName)) | Out-Null } $html.Add($obj) | Out-Null return $html } (ex. Get-HTMLFileTree -dir . | Convertto-Json -depth 100 | Set-Clipboard)