In the last video I challenged you to refactor the app into smaller components.

How'd it go?

This task might have taken some time and thought to accomplish.

The MainContent component especially had a lot of properties to accept and

pass to it's children.

I designed this task to give you some practice with components and

get you comfortable passing data around in a React app.

Each of these

two components

are serving to

organize the app

into sections.

So because they're just passing the props down the children I didn't rename any

of the props.

Next, let's look at the Header component and Header.js.

Here I imported a GuestInputForm component,

which renders the form below.

I'm passing the props right through to the GuestInputForm and

validating them at the bottom with propType declarations.

If I open the GuestInputForm component in GuestInputForm.js,

you can see the props are going to the elements that use them.

And they're validated by declaring them with propTypes.

Next, let's open the MainContent component here in MainContent.js.

And you can see that I'm importing these three components,

ConfirmedFilter, GuestList and Counter, at the top.

And validating with propTypes, as usual.

Finally, I'll show you what I have for

the ConfirmedFilter component in ConfirmedFilter.js.

And this follows the same pattern the other components to do.

I'll just let you compare it to what you have.

So go ahead and pause the video if that helps.

I want to point out that we now have a lot of components in the src

directory at this point.

Now, it's just a matter of style,

but you could just put them into folders to organize them a little.

So let's create two folders, a Header folder and a MainContent folder.

I'll put the Header and GuestInputForm components inside the Header folder

Then I'll put the MainContent component and

all its children inside the MainContent folder.

So ConfirmedFilter, Counter, Guest,

GuestList, GuestName and PendingGuest.

Because these folder names are exactly the same as the top-level

components of each directory, we can rename the Header and

MainContent component files to Index and they will be imported into the main app.

So let me show you what I mean.

I'll change Header.js to Index.js.

And I'll change MainContent.js To Index.js.

Now let's have a look at App.js.

So, before we changed the file structure just now,

these lines pointed to JavaScript files named Header.js and MainContent.js.

Now, those files don't exist, but the folders with the same names do.

So when the interpreter looks into the folders, it will look for

a file called index.js by default, and load it.

So, we don't need to change the code at all here.

If you look at the browser now, you'll see some errors saying the index

components we just organized can't be found.

So, to fix this, I just need to stop the development server, and restart.

And in the browser, you can see that the app works as expected.

Now, I'll let you try one on your own.

Looking over the MainContent folder, there are still a number of files here.

So pause the video if you'd like to and create a GuestList folder replicating

the same pattern we did with the Header and MainContent components.

All right, so inside the MainContent folder,

I'll create a new folder named GuestList.

Then I'll move the Guest, GuestName, GuestList and

PendingGuest components inside this new folder.

I'll rename GuestList.js, Index.js.

Go over to my terminal, stop and restart the server.

And it works.

Now we have our components organized into a few folders, and

the app structure is a little easier to navigate.

So there's still one bug in our application, and

it has to do with the indexes we're using to handle guest events.

See if you can spot it.

In the next video, we'll fix it.