Navigation Solution: Reusing a Component

[00:00:00]
>> Cool, right, let's look at the navigation exercise solutions. I've broken these two parts into four sections. So first of all, what we want to do is we want to move the colors from the color palette to home and then pass it and the palette name to the color palette components.

[00:00:20]
Right, so let's take these colors and move them to home. And now, I'm actually gonna rename this to solarized. Yeah. And I'm going to just create a second argument here. So these are the props I want to pass through. And let's do paletteName; 'Solarized. And colors, Solarized. Cool, and now we go into the palette and we're going to use the parameters that are being passed in.

[00:01:15]
So these were in route, I think. And let's do colors, will be route, actually, let's destructure them. Colors and paletteName. And passing colors here and the palette name in here. Route.params. Yeah, so this is a route.params, not just route. Yeah, so this is what now working. Now we can, In our color palettes we can get rid of our colors cuz we don't use them anymore.

[00:02:06]
Cool. [INAUDIBLE] Yeah, and yeah, if you haven't done it yet, I've added the, made the background color white cuz I prefer, I think white looks better, crisper with all the colors. Right, part two, make sure the page title will be the name of the color palette instead of the name of the page.

[00:02:37]
So this is actually done in the Home.js. And we can pass, not Home.js, sorry App.js. This is actually done in the App.js and we can pass a another parameter called options, which, where we can use to route and make the pallet's name the title of the page. I'm just gonna copy this, codes, and I'm gonna add it as another argument here, Into our color palette.

[00:03:04]
You see it's called updated, so we actually get a color name here which looks good.