All language subtitles for 7. Active Tab Footer Refactor

So we just got our footer set up with all of our links down here.

But we just noticed at the end of that video that if we use these links to actually navigate the active

tab is not being set.

You can actually see that because I hovered over this menu and that caused a rewrite under that did

cause the correct page to now be set.

But if we went over to the revolution now you can see it's still incorrect.

But if I hovered again then it will change it.

And that's because of the refresh fix that we have so that anytime the page renders our header is making

sure that we're on the tab corresponding to the U.R.L..

And so when we hover over these services tab that goes ahead and fixes that on re render.

But we need to make sure the just by clicking on the links that it automatically fixes and changes the

right tab.

And so we're going to have to refactor our code just a little bit if you remember we're keeping track

of which of these tabs is active by using in our header J.S. file up at the top down under our styles

by setting a value piece of state.

Well we need access to this value in our footer as well.

And so we're gonna have to move this out of our header dot J.

Yes.

Now before we do this let's also keep in mind that we have the custom software development mobile app

development and Web site development links down here which are the links found in our menu that appears

and we have a piece of code to manage which of these menu items is selected which will also need to

update if we may navigate from the footer links as well.

So if you remember we used the selected index piece of state to manage that style for us.

And so our footer is going to need access to that as well so to begin this refactor.

Let's go ahead and actually cut our selected index and set selected index hooks and we'll go ahead and

open up our app dot J.S. file and inside of the app function above our return statement at the top.

Let's go ahead and paste that in.

You can see we have a little error here.

And that's because we need to come up to the important statement for react and let's add some brackets

to D structure are use state hook out of there.

And now we can come back to the header dot J.S. and we can take our value and set value and cut that

as well.

Go back to app dot J.S. and we'll paste that underneath are selected index now with these two pieces

of state here on our app dot J.S. file.

We need to then pass it down as props to both our header and our footer.

So on our header let's add a value prop equal to our value piece of state a set value prop equal to

our set value function and we'll do the same for the selected index pieces of state set it to selected

index and the set selected index of function to our set selected index function.

Let's go ahead and copy all of those props and then we'll go down and we'll paste them onto our footer

as well.

So now both the footer and the header has access to those same pieces of State values let's go ahead

and save that and we'll flip back over to our header dot J.S. file.

And here you can see they are set value function is now not defined because we don't have it here in

the header but we actually have it on our props does set value function and since we created the set

value prop with the same name as we had with the function before all we have to do is now reference

it from our props object.

So let's come down and using easily is really helpful here.

So anytime we have one of these red dots we'll go ahead and add a props dot in front of it.

And so we'll scroll down and just make sure that you get all of these locations as well.

So if our value which is coming from prop stop value prop does selected index and we'll call the props

does set value function.

The props does set selected index function.

And then now in our dependencies for the use effect call we need to actually add props to this as well

and then change our selected index to props that selected index and value to props dot value.

Let's continue and below set our active value is now coming from the prop stock value.

And then we have the props set value function.

And again checking against the prop values now and I think we've got just a couple of more prop stock

value prop stocks set value promised asset value and props value.

See.

Got one last one.

Props set value.

And so now we've re factored all of these functions and state values to becoming from our props that

are being passed down from the ACT.

J.S. I'll clean this up a little bit so we can go ahead and save that now and head over to our footer

dot J.S. file.

Here is where we actually need to tell our footer items to change the active tab whenever we are clicking

on it.

And so we'll need to start by giving our footer function here access to our props then on our link here

we need to add in on click property and asset this equal to an arrow function which is going to call

our props DOD set value and then pass in the index for the tab we need to mark as active.

So for the home tab we'll pass in a 0 for our first index and let's go ahead and copy this entire on

click statement.

Let's now go and add it to the rest of our links.

But setting the correct value for each of the routes.

So the first index for our services route and then for our custom software.

It's also these services.

And same for mobile app development and the same for the Web site development.

And I will come down on revolution.

We'll be setting it to the second index and we'll do that for each of the options in the revolution

page.

We'll set those.

Make sure you get process set too.

And then we'll also add it for our about page to the third index.

So the third index for all these ones and now lastly for our contact us we'll be setting the fourth

index.

All right.

And we're almost done.

But remember how I said that we're also passing through the set selected index and the selected index

pieces of state to manage whether or not our menu items are selected if we're navigating there from

our footer links.

So for the custom software development mobile app development and Web site development links we need

those to be marking the correct menu item as selected as well.

So if we come up to our services column all these grid items and we come to our first services grid

item inside of that on click function let's wrap that function call with a pair of brackets so that

we can then add a semicolon and a another function to call on click.

In this case a props set selected index to 0 to 0 which will set the correct menu item is active.

If you navigate from these services footer link let's go ahead and do that for the other services links

real quick.

So we'll wrap this in brackets semicolon and then props dot set selected index this time with a one

and then we'll wrap this brackets semicolon props set selected index of two and we'll wrap this with

brackets give it a semicolon props does set selected index to three and that should be all we need.

So if we go ahead and save this we'll see our page refresh.

And so now what's come over and we can go to the home page here and we'll scroll down.

And so now if we go ahead and say use the footer links to go to these services page you'll see not only

is he services content being rendered these services path is in the U.R.L. but we're also now marking

these services tab as being active in the tabs as well as the services tab is being active in our menu

items.

So if we came down to the footer and navigated to the Web site development page we're now displaying

the Web site's content at the slash Web sites route and in the services tab the Web site development

menu item is being marked as active.

We can go ahead and refresh the page and if we go ahead and look at that menu again we'll see that services

is still being marked as the active tab with Web site development as our active menu item.

So the refresh fix that we had in place before and the header is still being ran.

Anytime the page renders which includes on refresh or even when we navigate from the footer which then

correctly handles the active tab.

So with that little refactor we've got this back to completely working and can start making our grid

responsive.

Now in the next video.