All language subtitles for 19. Styling The Active Tab

We've made a lot of progress with our header but there's still one thing that it doesn't do actually

navigate.

We still haven't set up the actual navigation system for the header tabs to actually change the page

that we're on as well as the display which page we have currently selected before we get into setting

up react router and handling the actual navigation.

Let's just set up the functionality that will keep track of which page we're on if you remember from

the documentation walkthrough you'll remember that the tabs component is allowed a value prop and this

value can be the index of the currently selected tab.

So if I were to pass in a zero here for the value and his save you'll see the page refresh.

And now our first tab in this case the Home tab is now highlighted the text and it has a little indicator

underneath as well.

If we were to change that active value from 0 to a 1 and then save then now you can see the services

tab is selected so that's how the tabs component maintains which tab is currently selected.

But we need to set it up to programmatically maintain that because right now if you try and switch it

doesn't even go to a different tab or do anything at all.

So let's look this up to actually work.

If you remember from the documentation we're actually going to use a hook.

And so we will create a constant and use the hook syntax to create a value and a set value function

that will be able to change our default state set with use state of 0.

Now we actually haven't imported you state.

You can see you state is not defined.

So let's go up to the top and next to inside of actually our ReACT import.

Put a comma and then a pair of brackets so that we can d structure out a another import specifically

and we'll do that to the use state hook.

Now they use a state is defined.

We're setting up a value on our state equal to zero to begin with if we now pass that value here to

our value prop on the tabs and then we hit save you will see that now our first tab is selected.

We still however don't have a way to change which tab we're on.

And so to do that we need to add in on change handler to the tabs component we can open that up and

then let's come up here to define what that on change handler will be and we can call this handle change

which is set equal to a function which will take any event as well as the value being passed through.

Which in this case is the index of the selected tab and then we're going to open this arrow function

up and to use the set value hook to change the state of our selected tab to the newly selected tab at

the new value.

Now we have to actually pass that function to our on change prop as the handle change function.

And now if we go ahead and save this our page will reload and if we come up and try to switch tabs we

see our little indicator is animated over as well as the tab is correctly highlighted.

It's really cool how easy they made that to set up and really just how nice that little bit of functionality

actually is.

One thing I don't necessarily like about it though is how we have this little orange line underneath

the tab.

I think that in some designs that could look really nice depending on how you use it.

But I think for my design I'd really prefer not to have it at all material UI provides a really easy

way to actually get rid of that indicator or actually just hide it really well by setting on the tabs

component a another property which is indicator color and we're going to set this equal to primary now.

Right now it's set to our default of secondary and you can see that orange but if we go ahead and save

with the indicator color set to primary you'll see that now the indicator is gone and if you're savvy

you'll know that obviously we just changed the color to primary and that the color of the background

is our primary color as well.

And so the little indicator is actually just hidden out of view.

So now our application will keep track of and display the currently selected page which lays the groundwork

for enabling us to actually then change which page we are on using react router in the next video.