How to build a Recursive React Component

hey y'all it's been a while since I've been on YouTube uh I had some conferences this spring but uh I'm excited to get back and making videos um I got a new course coming up so I'll talk about that at the end but today I want to show you uh how to make a recursive react component and to do that we are going to be looking at this demo right here we're going to learn how to build this with a single react component and if you've never seen re cursive react components before they're very cool I think you're going to learn a thing or two so uh let's go ahead and

get started right over here with a blank slate and I'm starting here with just some static markup and a folder icon and uh we're displaying just this home folder right now so let's say we have some more folders under home um right now we can see we're rendering home inside of an unordered list we have a list item here so uh right after this span let's add a new unordered list and we'll say movies music and pictures

okay that's a good start let's grab this folder icon and let's just drop it right here and uh these are just stacking on top of each other it looks like up here for our home uh we wrap this in a span with flex to flatten these out so let's do the same thing we'll come up here and grab these three drop in a span and then we'll go to the end here one two three and drop in the closing span and um that Flex item Center lays that out nicely um

so that's looking pretty good but we want to push these over a little bit since they're nested inside of home so uh This is Home here's our list let's just add uh some padding left maybe six that looks good and uh these are also a little tight looks like we have a little bit of margin y on each one of these line items so let's go ahead and grab these and add it just like that and okay we're off to a good start here um we've got our home folder movies music and

pictures uh but there's a lot of duplication going on here in our template so let's go ahead and pull these folders out into a little data structure here and we'll just call this folders and this will just be an array movies music and pictures and uh right here we should be able to get rid of these two and let's go ahead and folders. map each folder and uh we'll go ahead and key

this by the folder and we'll change the static string right here movies uh with the folder name so this is pretty cool we can come here and add documents and now we have a little data driven tree uh right here um but of course we want to go one level deeper uh folders can have folders inside of them so uh maybe inside of movies um we'll have action movies and comedy movies and so we want to add that to our data structure instead of just string let's go ahead

and make these some objects so we can add a little bit more structure here and we'll give them a name and um we will go ahead and close this let's fix this key right here this is going to be folder. name and the label will be folder. name and uh let's go ahead and come to movies and we'll add some nested folders and we'll give this a folder name of action and we'll Al add another

folder called comedy so pretty simple little data structure here and uh this looks good except we don't see action and comedy under movies so let's come down here right where we're rendering our folders and let's add some nested folders so we're going to do the same thing as before right outside the span we'll just grab a new unordered list come here and uh right here if this folder has folders of its own then uh we just want to map over these and and uh