Original subtitles

Let us go ahead and start implementing some of the things I discussed in the last video.

The first thing that I want to do is I want to start passing some of the restaurant data as props to

the road component.

So right now, remember, everything is hard coded.

It's always one, it's always McDonald's.

But as you can see here, we have the rank.

We also have the name for every single object inside of this JSON file.

So what I want to do ideally, of course, is to pass that data in from the table to the restaurant.

Now, let's remember that this right over here has quite a bit of data, and the restaurant only needs

to know these two things right over here.

So instead of passing the whole thing, I'm just going to pass these two things to rank as well as the

name.

So let's go ahead and do that.

So right over here, I'm going to say something like name and this is going to be equal to restaurant.

Again, keep in mind the spelling very, very tricky.

And then over here, restaurant that name.

And then we also want the rank.

So I'm going to say that's going to be equal to restaurant, dot rank.

Like so.

Okay.

I think that is pretty good.

So now what we can do and we can, of course, do the exact same thing for the other one.

Like so.

And now what we can do is we can go over here.

We can actually accept those props inside of the script.

So I'm going to go ahead and create a script, get rid of this junk.

I'm going to say set up.

I'm going to say the Lang is equal to TypeScript.

So Lang is equal to TypeScript.

And then I say cost props.

And I'm going to say that this is going to be equal to define props.

Then over here, we are going to define our props, of course.

Now we're going to define our problems with TypeScript.

So let's create an interface.

So say interface, you can just say here row props like so.

So let's remember what we have here.

So we're going to have a rank that is going to be a number.

We're also going to have a name that is going to be a string.

So now let's go over here and then right over here, let's create those triangle brackets and paste

that in there.

And now we should have access to both the rank as well as the string right over here.

So now what we can do is we can just say rank and let's just see if it works.

Let's just refresh and there we go.

Now you can see one, two, three, four, five, six, seven, eight, 25.

Then over here from 426 to 25.

So that's good.

Now, let's go ahead and change the name.

So let's just say name and refresh for some reasons.

Now reloading and there we go.

So this is looking pretty darn good to me.

One other thing that we're going to want to do is right over here inside of the ADF.

This is going to be taking us to slash restaurants.

Slash the name of the restaurant.

So that's very something that's important to note.

So let's actually go ahead and implement that right now.

So let's go right over here and we're going to make those dynamic.

Let's make this template literals like so.

So over here, we're going to say.

This is going to be slash restaurants and then slash whatever that name of the restaurant is.

Okay.

So that's pretty much all it is that we need.

So now if I refresh and let's say click on Starbucks, I got redirected to slash restaurant slash Starbucks.

Obviously, we're going to go for a four page, but we'll worry about that later.

Okay.

So that's pretty much just refresh this.

So it's pretty much all is that we need over here.

So the next thing I want to work on is the styling.

So maybe have some of the grayness right over here as well as some of the white.

So one thing that we can do is very simply just look at the rank.

And if the rank is, let's say, an odd number, we're going to show.

Gray If the rank is a not an odd number, we're going to show just pure white.

So that's pretty much all that is that we are going to do.

So in order to do this.

What we're going to do is add this row right over here.

I'm just going to add a dynamic style.

So I'm going to say if the rank modulo so if the rank modulo two.

So if the rank modulo two is not equal to zero.

So if it's not equal to zero, I mean that this is an odd number.

Then what I want to do is I want to add a background color.

So I'm going to put this in a in this curly braces right over here.

I'm going to say background color of our GBA.

We could also add a class, but let's just do this dynamically.

And over here we're going to say something like so and then we're going to give it 0.15 of of opacity.

Now else.

So else what we're going to do is just return nothing.

We're going to keep it white.

So now let's go over here and there we go.

Now, you can see right away that it is looking a okay.

Now, this actually might not be the best idea because now you can see we're getting like this weird

checkers pattern.

And I don't like that per se.

So maybe instead of actually using the rank, what I'm going to do is use the index.

So that is over here.

We're just going to start with zero.

And therefore, over here is going to be zero.

Over here is going to be zero.

Therefore, this is always going to be the exact same color, which is exactly what we have right over

here.

So in order to do this, all we're going to need to do is actually pass the index down.

So we're going to need to grab the index from here.

So we're going to say index like.

So we're going to pass it down.

We're going to say.

Index is equal to index.

And then over here, I do the same thing.

We're going to say index is equal to index.

So we're going to change this up a little bit.

So over here, we're going to accept the index as a number.

And over here we're going to say index modulo two is equal to zero.

And if that's the case, then we want to, um, to do that.

And there we go.

So now we get this.

This nice looking pattern that we have.

Okay, so that's almost it.

The last thing that we need to do is add this header right over here.

So what I'm thinking of doing is actually introducing that into the row itself because it's kind of

like a row as well.

However, obviously it's styled a little bit differently.

So what I'm going to do here is I'm going to say that this row is going to accept another prop and this

prop is going to be called the row type.

So I'm going to say here, row type.

And this is going to be a string that is going to either be ahead or it's going to be whatever.

And actually, maybe a better thing is just say is header and this is going to be a boolean.

So what I'm going to do here is I'm going to say div.

And this too, will have a class of row.

And I'm only going to render this div v if.

And then only if it is a header.

So I'm going to say is header.

Now over here we're going to have a V else.

So else we're going to render this like so.

And then right over here, what we're going to do is we are going to enter we're going to have an H

for we're going to give this a class of header.

And this is a good it's going to say rank.

And then over here we're going to have another H for we're going to give this a class of header as well.

And this is going to say chain.

Okay.

And now what we need to do is to go back to the table and then inside of the table, right above each

row, we're going to render one extra restaurant, restaurant row.

So I'm going to copy that because again, a tough word to spell and all I'm going to pass for props

is is header.

And then his header is going to be equal to true.

Like so.

Just like that.

So I'm gonna do something to go out and copy this piece that in there for both of them.

And there we go.

So now you can see that we have this header right over here.

Now, one thing that we also should do in this case is we should make these optional, these props optional,

because we're not passing the props for every single one.

As you can see here for this prop, what we're doing is we're not passing in the name and the rank or

nor are we passing in the index.

So what we should do again is just make these optional and we can do that by very simply just adding

a question mark, saying that all these things are optional and you don't have to pass them in.

Okay, so that's pretty much it and that will build out our page.

So this was relatively involved and maybe you guys learned a little more view, but then that standpoint,

it was pretty stale.

So from now on, we're actually going to be learning quite a bit of new Knox concepts.

And specifically what we're going to start working on is navigation.

And uh, um, specifically again, what we're going to be working on is navigation to a specific page

like so.

So let's figure out exactly how we can do that.