Beautiful job once we've got our function in place now, of course, on one of my movies now, I do
need to hear here proper query, because first I would want to display the movies and then, of course,
we'll deal with an error.
And of course, once we have context in place, we navigate to movies, dress.
That is our component.
We already have used global context online inside of the component.
I would want to invoke it and grab two things.
I don't want to grab my movies as well as is loading so const.
Then we go with movies and that is loading and that one is equal to your global context, and then we
invoke it and then we're going to go with multiple returns.
We're going to go.
If years loading is true, then we would want to do one thing.
And then when we get the movies back, then, of course, we will render them.
So in this case, as far as the return is going to be somewhat simple where we go with there with a
class of loading and once we're downloading, then, of course we display the movie's component, which
at the moment is just a heading to support a split second.
You can see the loading and then, of course, we display our heading to now as far as the proper return,
we're going to go with section.
Then we're going to select the text and remove it and I'll have to have your class as well.
So class name is Grace and I would want iterate over my movies throughout my movies are a I call map
and plan for each iteration.
I would want to return a link.
Now, why am I returning a link?
Because once I click on the movie poster, I want to navigate to the placeholder page where I'll fetch
more info about the movie.
So movies map and then I'm iterating over.
And as far as the return, well, for the time being, we're just going to go with heading for and we'll
call this a movie.
Now, what I'm really interested in here is the parameter.
So I'm going to call this movie and then let's just see what we're getting back.
So we're going to cancel log and then movie and we should see 10 movies on the screen.
Yep.
That's what we were looking for in the console.
Also should see the object.
And as far as the object, again, properties are capitalized.
So, for example, here I can see the poster title type and you here as well as the.
Now, the idea is important because, of course, I would want to pass it into my link.
So once I click on a movie, not only I would want to navigate to my placeholder page to the movie page,
but I also would want to pass in my ID through the EU URL programs.
So first, I guess I would start by structuring all the properties that we're looking for and all right
away I give it an alias to all of them because in my opinion it is just a bit faster.
So here we go with I Am and then DB and then ID.
That is the property name and.
All right.
We call it an ID, then poster will be poster.
So notice I don't like this capital case, so I just go with lowercase.
The title will be title and then yea you guessed it, we'll be here.
Now all of that is coming from my movie Perama.
I'm not as far as the return.
Like I said, I'm going to go with a link here, and since I would want to make my link dynamic, why
do I need to do I go template string?
Then remember, I went with movies if you didn't and of course, don't have that.
And then what was my primer?
Well, that was the idea.
Now, the only thing that I'm looking for in here is the value.
So remember when we were setting this up, I said that there's going to be YORO of movies and that whatever
is the idea.
So that is my euro primer.
Now I need to pass in the value.
And of course, in this case it is going to be ready.
And then also, since we have a list, I'm going to go with Key and I'll pass in the area since we need
that unique value for our kids.
And then the last thing that I would want is the class name or class name is equal to the movie.
So that, of course, is just going to make sure that we have some kind of styling on the inside of
the link.
We're going to go with article online instead of the article.
I would want to go with my image.
So and eventually we'll make it a bit different.
But for the time being, we're just going to go with poster, because I would want you to see where
the problems are going to be.
So that's why we have to alter this one moment.
And then as far as the alternative.
We're going to go with title, their title and mine right next to the image we're going to go with there
with a class of movie and info online of of.
There's going to be a hearing for the class, a title online.
We will just run under our title property.
And then last hour, I want to go with you.
So once we render all of these things, we should see all our movies show.
And then if I navigate to the bigger screen of we have four column layout like so and then once I click
and navigate to a single movie, but the idea is different.
So if I go back and for example, I'm looking for the other movie click and again, the value is a bit
different, not the last thing that I would want to do in the movies.
And my component is to work with my poster because once you set up the application, you'll notice that
once in a while you don't get the poster back.
So let me go back to the context.
I'll try to remember what was the scenario.
So I'm going to go with this string value and hopefully it is going to return some movies without a
poster, because as you can see, by default, yes, I'm getting all the posters, but that is not always
going to be the case.
So once in a while, you might get a movie, a valid movie, but there's no poster.
And instead of just displaying the text, I would rather want to display some kind of default image.
Now, what am I talking about?
Well, in the movies, you'll notice that there is a URL that points back to no picture is available.
So essentially I went online and I just search for pictures.
And this was the one that I found where I can display no photo available.
Again, technically, you don't have to do it if you don't want it.
You can still display the text if that is your preference.
However, in my case, I thought, you know what?
This is going to be a bit more meaningful.
So in here I have the URL.
So some kind of variable and I'm just pointing to the picture and then I'm going to scroll down and
where I have the poster, I'm actually going to check whether a poster is not available.
Now, why am I doing that?
Because it will console log.
I'll see that if we cannot get the picture for the movie, the value is going to be left.
So it's going to be not available.
So if we can get the picture, then, of course, we're pointing to the URL to specific end point.
However, if we don't have it, we have this and a not available.
So now of course, where I have the poster, instead of just going for my poster value, I'm going to
set up my ternary operator, Wormer.
So if the poster is not available, so and and then of course I would want to display the URL.
Now why do I want to display the URL?
Because this points to no picture available.
However, if the poster is there and of course I would want to go with my poster.
So I set up my tour operator and there it is.
Now, of course, I have at least a photo that says, you know what, there is no photo available instead
of just this empty text and that should do it for our mortgage component.
And now we can start working with our search for.