All language subtitles for 7. Using Menus - Selection

OK I know it's been a lot for this menu but we really have it looking pretty good right now and we're

just going to go ahead and add a little bit of extra functionality to maintain which menu item we are

actually on now.

If you remember when I walked through the menu documentation they actually had an example of how to

do this by setting a selected prop to the menu item and checking against a selected index state to determine

which value is active.

And so then which menu item deserves the selected styling to do this we're going to have to change a

few things but then it will result in some really clean looking functionality.

So let's go ahead and get started by coming over to our header function and underneath the open and

set open hooks we're going to create a another set of state.

This will be the selected index and set selected index hooks with the use state function with a default

state of 0.

Now we actually need to be iterating over a list of our menu options so that we have access to an index

for each one where currently we have no way of tracking an index of each menu item so to take care of

this we're going to refactor this a little bit because you can see actually that there is a lot of a

repeated code going on between each of these.

They each have the exact same on click handler.

They all have the component equals link and the classes equals classes dollar menu item.

So the only things that are different are the path for their route in the text that they have inside

of the menu item.

I think that we can refactor this pretty easily and create some pretty clean code.

So let's go up here to the top and underneath handle close what's come down here and create our menu

options and we're gonna set this equal to an array.

This will allow us to map over each element in the array and have an index assigned to each one so each

element in this array actually needs to contain two pieces of information so the elements in this array

we're going to make an object in this object.

We're first going to have a name property set equal to the name or the text that we want set inside

of each menu item.

So services in this case and then a link property where we will set the route that we want.

Each menu item to go to in this case slash services every then go ahead and make one of these objects

for each path.

So name custom software development and then the link of slash custom software.

And another one for loops.

Didn't mean to open that up for name of mobile app development and then a link of slash mobile apps

and then comb and fix things.

Mobile apps and then the last one.

A name of Web site development and a link of slash Web sites.

So that is all we need set up to implement this along with a click handler.

So actually underneath this handle click let's create a concept handle handle menu item click.

And to set this equal to not only a function taking any event but also we need an index passed through

as well.

And then we'll create an arrow function opening it up.

And if we're clicking on a menu item we still want to set the anchor element to null because the menu

will then go away which means we also need set open to false but then the most important piece here

is we need to set our set selected index to pass in the index of the menu item we just clicked on.

So now if we come down and we're going to remove all of these menu items so all of our menu items let's

go ahead and get rid of them and we're going to open up a javascript function or inject some javascript

here and we're going to take our menu options constant and we're going to map over it then for each

element inside of here we're going to take in option.

So this will be our individual option as well as an index which we then turn into an arrow function

and open it up inside of here.

We'll create our menu item and open it up.

And on the inside we're going to pass Oh it's like we have a problem here.

I think actually and get rid of these brackets and I think it should have been a parentheses.

So make sure that you get those put in place.

Yep that faced it.

Because by having the parentheses we won't need a return statement.

And this is just returned directly.

So make sure you change those brackets to a parentheses and inside of our menu item we're going to render

the option dot name.

And that is coming from the name a property that we set here on our menu options.

So for each option in there it's going to set the name that we have set inside of the menu item if we

went ahead and just saved this.

Now we would see when we hover over the services tab there we still have all of our menu items but now

they're not styled the same as they were before because we haven't put the class back on and they don't

actually navigate us anywhere because we haven't set that up either.

But you can see that it is successfully rendering the names for each menu item from our menu options

array so let's continue getting this set back up how it was and we'll assign the component prop to our

menu item of link and set that to our option dot link so now for every option that we've passed in and

we'll have the appropriate link to the route that it needs to go to.

And then we need to set our styling again by setting our collapses of the object with root and then

classes dot menu item and then of course set are on click equal to our parentheses or brackets and then

turn that into an arrow function which is then going to call a set of functions first being the handle

menu item click.

And if you come up to the handle menu item click function you'll remember it takes the Click event as

well as an index because we need access to the index after the event that's passed through.

So we actually need to change our arrow function to take the event property that is being passed and

pass that along to the handle menu item click function as the event and then pass are index which is

coming from mapping over the menu options.

This will now set the correct menu item to being selected whenever we click on it.

But we then also need to set the selected prop which will apply the styling if the current menu item

is the one selected will determine this by setting this equal to check if the index the index that we're

currently on of IE is equal to the selected index state value the selected index state value is going

to be called with this index value any time we click on the menu item.

And so if that index is set for these selected index and that is the index we're currently on then that

menu item will receive the selected styling.

Now remember the on click handler also actually needed to call the set value function of set to 1 to

set the currently selected tab to the services tab.

We also need to handle closing the menu whenever this is clicked because it is then obviously navigating

to a new page since we're iterating over an array.

We also because of react we have to add the key component to any of the elements that are being rendered

dynamically.

And we need to set this to a unique identifier and to do that we'll just pass the entire option through

because that will never be the same for any of the components.

Now if we go ahead and save this it will refresh the application and reorganize my code here to be a

little bit cleaner.

And now if we come over and we hover over our services tab we can hover over these and you'll notice

the services tab at the top now has a darkened background to indicate its selection.

Now it looks like our routes are a little messed up right now.

So let's go back to the home page and I'll show you why in just a minute.

But if we are on the home page and we hover over the services tab you can see that the services tab

is actually still showing that is being selected even though we're on the home screen.

So even though the the services tab was previously selected we don't want that to still be shown if

we're not actually on the page.

So to make sure that that doesn't happen when we come over here and on the menu item when we set these

selected property we should also check that we are actually on the value of 1 equals 1 and that is making

sure that the value of the active tab is set to the services page.

So if we go ahead and save that we'll come over here and now still on the home page if we hover over

the services tab you'll see that none of the tabs are selected.

And if we come over to the mobile app page and now hover you'll see that it does show selection.