All language subtitles for 20. Section Cleanup

In this section cleanup we're going to do something that you may or may not have noticed that we have

left out so far and that's actually going in wire up all of our buttons on the home page all the learn

more buttons the estimate buttons.

None of them are actually taking us to any of the pages.

So in this video I'm going to try and as quickly as I can we're gonna go through and set up all those

buttons and fix a tiny little bug that showed up as well.

So let's go over to the code editor and take care of all that.

Here we are.

And let's start getting these buttons hooked up.

So if you realize we even the button in the header we even forgot to hook that one up.

So let's go in and we'll start with that in our header dot J.S. file and we'll come all the way down

to where we have our estimate button.

See there's a draw here is tabs.

And here is our free estimate button and we need to go ahead and we'll add the component property here

and feed it the link that we've imported from react router.

And of course that means we'll need our two property telling it to go to our slash estimates route so

we can save this page or refresh.

And now if we go up to our header button and we click that we're navigated over to the estimate route

with the estimate content on the screen.

But we have the Home tab marked as active.

So what I want to do when we navigate to our estimate route I want to actually clear off any active

tab and you can do that by calling the set value function and passing in an index.

They actually does not appear within your tabs.

So since we have 0 0 1 2 3 and 4 if we pass in an index of five that's actually going to clear the active

tab.

And that's kind of what I want for the estimate page.

So similar to how these menu items have to call the set value from props.

We want our estimate button to on click also call our props to set value and passing five but we don't

want this to fire right away so make sure to put in the parentheses and make this an arrow function.

So that will be called at the correct time.

So let's save this now and we will navigate let's go back to the home page and let's go back to the

estimate page with our estimate button in the header.

We click that we're navigated over and you see the Home tab is no longer marked as active one thing

to note however is if we refresh the page the Home tab is actually being marked as active again.

And if we come up to our use affect function here in the header where we are implementing our refresh

fix we're actually doing this based on the menu options and our roots objects up here and neither of

these include our estimate route.

And so what we need to do is we need to come down and add a case.

So make sure see up.

So underneath our break is statement here add another case and if we are on the slash estimate route

well then we need it to props set value of five.

We can go ahead and break out of that afterwards and if we save this now the page will refresh and the

Home tab is now no longer selected.

So we can go back to the home.

Let's go back to free estimate.

It's no longer selected.

We can refresh the page and it still is not selected.

So I'm glad we're able to take care of that real quick.

We can now go back to our home page.

We can close out of the header and let's start hooking up the rest of the buttons.

So in our landing page component let's make sure we need to actually come up and let's import our link

from react router Dom.

And now we can go to all of our items.

So we'll start with the estimate button here in the hero block.

We'll add the component equals link and then a two equal to slash estimate and let's go ahead and copy

the component and two props because we're gonna be repeating this a lot.

And now let's go in and we'll add that to the learn button but this learn button I actually want to

take us to slash revolution.

So that's where I want that one to go to.

And now we can keep coming down and our button here for the and learn more button on the custom software

development that is going to take us to slash custom software of course and scrolling down.

We now have the button for the IOW Android app development.

We will paste our props give that a slash mobile apps route and then here is our button for Web site

development.

We'll give it a slash Web sites keep coming down.

You have the button in the revolution block.

Here's that button right there.

Paste those in and this is also going to slash revolution.

Keep scrolling down.

Now we're going to have the about us info blog.

So on this button paste into slash about and then the contact us learn more button right here.

Paste that to slash contact the final button we have to hook up is the estimate button here in our call

to action.

So let's go over and open up the call to action dot J S.

And here we also need to come up and import our link from react ruder Dom if I can get that right.

And then we'll come back down to our button.

We'll paste those in and give it a slash estimate.

It's actually already right.

So we can go ahead and save this now and come back and we can save our landing page.

And so all refresh and all of these buttons should now be working on the estimate page.

I think that that actually you know it looks like we got that one more button.

We didn't change that.

So over on the call to action up we put the estimate on the learn more button.

We need to put that to slash revolution and then we didn't even get it on the button here.

I don't know what I was thinking.

Slash estimate.

There we go.

So we save that.

And now more and more takes us over to the revolution.

Go home.

We can try any of these buttons.

Now

you see all of these are now properly navigating us to the correct pages.

The only thing is it is still not updating our active tab because we haven't set up any of these links

to do that for us either.

So we need to come to our app dot J.S. file and in the same way that we passing in value and set value

and selected index and set selected index to our header and footer we need to pass that to our landing

page as well.

And I realized actually there with our footer we're never using value or selected index.

We're actually just using the functions to change those values.

Set value and set selected index.

And that's actually all we're going to need for the remaining page as well.

So we'll come up and we're we're passing in our landing page component.

Let's change this to now be an actual landing page component like this and we will add the props set.

Value equals the set value function and the set selected index is equal to our set selected index function.

So we can go ahead and save our app dot J.S. file page will refresh.

We can come back to our home screen and here you see that we have an error.

The landing page is not rendering correctly.

And I wanted to show you this because you can't actually add props to a component in a react router

route like this.

So what we need to do instead is they have a different problem.

So instead of component what's changed that to render and here we're going to create an arrow function

with props as input and we'll open that up.

And here we can set our component with its props like this but we also need to make sure to extend all

of the other props.

So make sure that you have that and if we save we'll see the page refresh and our landing page reappears.