In this section we're going to start to fix up a couple of loose ends or end our application.
First things first inside of our terminal.
We've got two distinct warnings and one error message that is displaying as a warning as well.
So we need to make sure that our I-frame element has a title assigned to it.
We need to make sure that our image elements for each of these thumbnails right here have an appropriate
Allt property and we need to make sure that our list of records has a key prop assigned to each one
as well.
So let's get to it.
Well first start off with our I-frame inside the video detail.
So on my I-frame right here I'm going to make sure that this thing has a title and I'll give it a very
simple title like video player by then flip back over.
Looks like that warning went away.
So next up I'll find my video item component I want to make sure that the images inside there have a
property so inside of my video item I'll find the image property or the image tag and I'm going to make
sure that it has an alt assigned to it.
Now for the Allt we can just reuse the same title as the stand in for the image member.
The altar is only going to be shown if the image fails to load up which is usually not going to happen
on YouTube.
The other use for it is anytime someone with disability issues is trying to use our application.
So I'll put in a video snippet title and now and I saved this is going to be reformatted to a multi-line
tag like so.
So now if I flip back over cool both messages are now gone.
Now I'll do a search for say buildings and we've now got that error or warning around the fact that
we don't have a key prop inside of our list.
So for that I'll go over to my video list as we render each individual video item.
So these video Aitan components need to be given a key property that is going to be used internally
by react to make sure that it efficiently renders our list over time.
So inside of your all get this thing a key prop as a key.
I'm going to give it each individual videos ID so I'll say video ID DOT video Id like so and remember
it is a lower case D.
It has not kept a lowercase like so.
And then when I save it's going to again reformat it into a multi-line tag.
All right.
Let's try doing another search back over here and now I don't have any warnings going on whatsoever.
Now if I click on one of those images I start to get the same ads I had before which is totally fine.
Again these are probably because of running a ad blocker on your machine or something similar to that.
All right.
That's a pretty good improvement.
So now the next we need to do is make sure that the video list down here shows up to the right hand
side of our video if we're going to make sure that it matches our original mockup.
So for that we're going to add in a tiny bit of styling to our app component.
Here's the app right here.
So essentially what we want to do is use a grid system with semantic UI to make sure that the video
detail and list lay themselves out next to each other.
Now the grid system that we're going to use here is not the same CSSA grid system that we used in the
previous application.
In this case we're going to use semantic uys built in grid system.
If you pull open the semantic UI documentation you can go to collections right here and find grid.
So again different system from the CSA script that we use in the last application.
Essentially all we have to do here is add on a div with a class of UI grid and then we can specify some
columns to essentially lay out our video detail in our video list right next to each other.
This won't be that bad.
What we do is add in a couple of elements to our app component.
So I'm going to first begin by finding my video detail and video list.
I'm going to wrap both of those inside of a div
I'm going to give that div a class name of what does this thing need this thing needs a UI grid.
And then inside there are going to place another div
with the class name of UI row.
Now I know that you did not see I wrote in the example we were just looking at back over here and this
is not a complete example.
Essentially whenever we are using this grid we can place a div with the grid and then anything that
we put inside of a single row will be attempted to be rendered on the same line.
If we don't put this row inside of your then in some scenarios the video detail and the video list might
try to render themselves on different lines or essentially different roads.
All right so now the next thing we'll do is wrap both the video detail and a video list in their own
individual device.
And so this is what is going to form the two separate columns that are going to get the video list and
the video detail to show themselves next to each other.
On the day that wraps the video detail I'm going to give it a class name of 11 wide column so that essentially
means use 11 out of the default 16 columns to show the video detail and then on the day for the video
list I'll give it a class name of five wide column and in a very similar manner.
The five here means you use 5 out of the 16 default available columns to render the video list.
All right.
So let's now save this all flip back over.
I'll do a quick search for my favorite term I guess buildings.
And now if I click on one of these things will see that we get this really nice layout where the video
list is right next to the detail.
All right so that's a big improvement on styling.
Now let's see one mention here is that when a user first visits our application we are still getting
that kind of annoying loading message right there which isn't really appropriate because it doesn't
really tell the user what they should or shouldn't be doing.
So I think that we need to maybe have a default search term inside of our app.
In other words when the user first floats the application maybe we should search for some term by default
like the buildings or children's stories or whatever it is we want to search for.
Remember the other thing inside of your That's kind of awkward is that when we search for a new term
like if I go from children's stories to buildings the list over here updates but I still see the old
children's stories video.
You're in the detail which is also a little bit awkward.
So let's think about these two problems and figure out how we can solve them in the next video.