Without a doubt, we could probably condense down these four different functions into just one reusable
function.
So, for example, maybe we could build some reusable function right here called something like show
component.
And maybe you could take two arguments, maybe the route or the path name to watch for and the component
we want to show, and then instead of here, we could write out a little ternary expression and return
it to get, say, if window location, half name.
Equals, equals, equals roots.
Then let's return the component.
Otherwise return null.
So we could probably make use of this function right here to control showing all these different functions
or components.
We've now wired up.
But this is not really a super react style approach, rather than making some stand alone function.
Maybe you could try making a component, a component that would decide when to show some other component
based upon the current path name that the user is visiting.
Let's try that out.
Just bear with me for a moment.
Inside my component's directory.
I'm going to make a new file called Route Dot J.S..
And then inside of here, we're going to create a new component called Root.
Let's not forget to import.
React at the top.
And then we will export route.
Now, route is probably going to need two different props.
The first will probably be a path.
So essentially when we want to show some component and then the other prop would probably be the component
that we want to conditionally display.
So I'm going to receive those as props called Path and children.
I'll show you why we are receiving one as a prop called Children in just a moment.
Then inside of here, we can write out basically that same kind of ternary expression, we could say
return window location.
Half name equals equals equals path.
And if that is true, then let's return children otherwise return.
No.
You'll notice that inside of here we have not written out any jail sex whatsoever because that we do
not actually need to import reaction to this file.
We only need to import react when we are writing J.S. X.
So because we do not have any G.S. X, I will delete that import for right now.
Let's now save this and then go back over to our APJ as file and try to make use of this new route component.
Back inside of Abdul G.S. at the very top.
I will import route from component's route.
And then back at our app component itself, I'm going to replace these four different function calls.
So instead of four different function calls, we're going to show that new root component or separate
times for each one.
We'll provide a path PROPP that is going to be when we want to show some components.
So for the first one, the accordion, we want to show the accordion.
Whenever user goes to a path of just forward slash.
Then to tell the roots when we want to show the accordion or which component we want to show, we will
provide the accordion inside of the root tag.
And I will provide what we call the prop for the accordion.
It was items.
As a quick reminder, whenever we provide one jail sex inside of another jail sex tag, that inner element
right there is provided to the outer one as a prop called children.
So right now, the accordion element would show up inside of our root component as a prop called children.
That's why we are receiving a very special prop with the name of children and returning it if we want
to display some inner component.
OK.
Let's now say this and see how we're doing.
If we now look back over and go to just localhost 3000.
We'll then see our recording component up here on the screen.
OK?
That actually looks pretty good.
Let's try also putting this together for our Wikipedia search list.
It's I'll put in another route.
I'll see if it user ever goes to a path of flash list.
Let's show the search component.
So say that.
Now we should build to go to a local host, three thousand list.
And hey, there we go.
There's the Wikipedia search.
We can repeat it again for.
Flash dropped down.
And we'll show the dropdown.
And then finally or translate.
Now, our drop down component right now is still not going to work until we provide it a couple of different
properties.
Let's first just try out the translate.
I'm going to say this very quickly.
I'll try out flash translate and we see a translation.
And then in theory, if we go to dropdown right now, we'll see an error until we provide some appropriate
props to it.
Well, let's go fix up the drop down component, cause it looks like otherwise everything is working
out pretty well with this new approach.
So at this drop down component right here, going to provide a couple of different props to it.
First, I will put in a label of select a color.
I'll provide options of options, remember, we had defined options as an array at the very top, this
file.
We also have to provide a selected piece of states of selected.
And in on election change or was it on selected change, it was on selected, yep.
Unselected, though, on selected change.
Be set, selected and, well, just very quickly defined, these selected and set selected piece of
state.
So.
Elected that selected.
And I'll give this default value of options at zero.
Guess now we can test out, drop down very quickly.
All right, there we go.
So there's the dropdown and we can toggle between all these different colors.
All right.
So all we really did here was extract that routing logic into a reusable component.
Now, right now, it might seems seem like that's a little bit overkill.
Why would we create a separate component for this?
But as you'll see very quickly, there's actually a lot of interesting things we can do when we define
a routing component and we can insert it anywhere inside of application.
All right.
Let's take a quick foser here when we come back.
Next video, we'll start putting together the header at the very top of our screen.