Original subtitles

You can see if I come over to the application and refresh the page that the About Us page that I was

on is still selected so you can see our active tab refresh is still working with our new refactor this

refactor is actually going to be more useful than you might be thinking because this will actually also

allow us to do two more re factors that will really clean up the code in our header.

So let's come over down past use effect inside of our tabs component.

And here we're actually going to replace all of these tabs with one single statement to iterate over

our roots and create a tab for each one.

So let's take a look at what these need and you can see that each tab has a class name of tab a component

of link a two of the link they need to go to and a label with their name.

Well that is all information that we can either copy for all of them or the root in the name is exactly

the information we have in our roots.

Object.

The only exception here if you notice is our services tab the services tab has an on mouse over the

aria Owens and the Aria has pop up props.

So before we start this refactor what I'm going to do is go ahead and actually set each of these properties

on our services root in the roots array.

So let's get started by doing this and we'll copy.

Actually we can cut everything out of the aria Dash has Owens for our services tab and come up to their

roots array and inside of our services object.

Let's create an aria owns property and then just paste in the ternary statement that we just copy.

Next let's create a Aria has actually Aria pop up property and it will come down and copy the ternary

statement inside of our Aria pop up property here and put that inside of our object blast one is our

mouse over function and it will set this equal to again everything inside of our own mouse over property.

So cut that and then we'll come and we'll paste it.

And now all of that information is living within our roots array.

So now if we come back to our tabs we can go ahead and inject some javascript where we will take our

routes array and map over it which will give us access to each individual route along with an index.

We actually need to wrap these in a another set of parentheses and then let's open up our arrow function.

And again actually the use not brackets this is gonna be a set of parentheses as well and inside of

here.

Let's create our tab component remember we said that each tab needs a class name of collapses dot tab

as well as a component of link.

We also need a two equal to our round dot link and then similarly we need our own label equal to our

root.

The name property that looks pretty good so far but we actually need to cover for the services tab.

In which case we'll have an aria.

DASH OWNS PROPERTY AND WE'LL SET THIS equal to our roots.

Dot dot Aria owns and so this will provide the correct Aria owns information for our services tab where

on all the other routes that do not have an aria owns property that will simply return undefined which

is equivalent to not setting the property at all.

We'll do that same thing for the aria Aria Dash has pop up properties equal to our route da Aria Aria

pop up and lastly for our on mouse over we'll set that equal to the route dot mouse over event and make

sure I have that correct.

Yes we said mouse over and then mouse over we actually don't need this second tab right here so let's

make this a self closing tab.

And now we can actually go ahead and all the way down to the contact.

Let's get rid of all of those tabs inside of there.

Make sure you go and get this Home tab as well.

So the inside of our tabs component all we are doing is iterating over our roots now in our page here.

We have the tabs visible.

So if we save this in the page refreshes all of the tabs should still be there properly so let's save

this.

And we'll see the page refresh.

And you can see all of the tabs still exist and look normal.

This did a great job of refactoring our tabs component but we can actually implement this same technique

in another place as well.

So let's come down here all the way to our list which we are using inside the drawer and you can see

that each of our own list items has a lot of these same functionality as well.

So each one has an on click property which is setting the open door to false and then setting their

value equal to whatever index they are currently on as well as they all have the divider.

Prop A BUTTON prop the component equals link prop the two prop to their link and a selected prop a checking

if their value is selected

inside of the list item all of the A-list item texts are the same as well applying classes for our style

items and having the name of the item inside.

This again looks like a perfect place for us to iterate over the routes and get rid of a bunch of this

redundant code so underneath our list component we'll inject some more javascript.

And again we'll take our routes array and map over it for our make sure we get the extra parentheses

for our route and index and then we will open the arrow function up again parentheses keep forgetting

that but inside of here let's create a list item and then a list item text inside of their inside of

our list item text.

Let's go ahead and put our route dot name and then we'll also add the disable typography prop to the

list item text as well on our list item component.

Let's add the on click handler so equal to our function which is calling all of our other handlers to

set set the open draw to false as well as setting R value equal to the route dot active index.

Remember we already had that property for determining which index needs to be active for each given

route and so we'll just pass that through explicitly here to avoid any confusion.

Now outside of our own click but still on our list item.

Let's go ahead and add the divider prop along with the button prop and the component equals link props

then we have our two property which is going to be our route dot link link.

And lastly these selected property which is where we're checking if the currently selected value is

going to be equal to our route.

Dot active index I think this means actually we don't need this index right here so we can go ahead

and get rid of that which means we can get rid of that extra set of parentheses as well.

I think the only other thing we're missing is on our list I don't text we forgot the class name equal

to R value.

Check to see if we are on the route dot active index and if we are then we're going to apply the class's

dot draw item style along with the classes dot draw item draw item selected style and if we are not

on a selected item then we're just going to apply the draw item style now that I think has officially

covered all of our functionality for all of these list items and so will come down and except for our

estimate list item.

And here it uses the estimate class name which is why I found it easier to just leave it as its own

separate and list item.

But up above what's take the contact us and all of the other list items all the way up to our home list

item and we will get rid of those leaving only our routes being iterated over up above If we go ahead

and save this now.

Our page will refresh and if we shrink the window down to where our draw appears you'll see when we

open it up.

The all of the links are still within.

This means we are correctly iterating over our routes and creating a list item within our draw for each

one.

And you can see if I go and click the revolution is still functioning so you can see how simply rearranging

our routes into an array which we can then iterate over allowed us to save a lot of space and efficiency

in multiple locations within our code whenever you find yourself repeating multiple pieces of functionality

like we did for The Wiz or for the tabs you always want to try and think about a way that you could

refactor to make it less redundant and more efficient.

All right.

A couple more extra things.

So here if we come up to our menu I want to actually add a prop here called Keep mounted which will

make sure that all of the menu items are actually always mounted in the DOM regardless of whether or

not they're actually visible on the screen which will just make this a little bit better for search

engine optimization which will always be able to find which tabs we have on our website.

We actually also need to come up to where we iterate over our routes and on the tab.

I forgot the since we are iterating over it.

We need a key property and this needs to be a unique identifier so I'm going to head and use a back

tick to inject the route along with the current the current index that we are on.

This should be sufficient to create completely unique identifiers and I'll actually go ahead and copy

this and then come down to our list and on our list item.

Let's go ahead and paste that key as well.

Except for index let's change that to the route dot active index and that should still create a unique

identifier.

I think we need one more up here where we iterate on our switch.

Oh actually we used the for each instead of mapping so we won't need it.

In that case.