Solving a practical intermediate react interview challenge

My VSCode Extensions:
- theme: material community high contrast
- fonts: Menlo, Monaco, 'Courier New', monospace
- errors: Error Lens
- extra git help: Git Lens
- tailwind css intellisense
- indent rainbow
- material icon theme
- prettier & eslint
- ES7+ React Snippets

[pepperdayjackpac]

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.

[Thassalocracy]

11:26 A suggestion, the <details> 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. 😀

[alanthomasgramont]

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

[JoaoVitor-gmyf]

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

[BrooUmad]

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.

[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! :)

[aamiramin]

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

[theantibeta]

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

[skapha]

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

[csy]

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!

[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, <div> could do the trick

[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.

[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.

[EvilTim]

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.

[brayancuenca]

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 🤙

[bradaa]

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

[lofibeats]

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

[mandalorian]

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

[MrAlexVelik]

Thanks for the great content, as always, Cody!