Okay, we have our list of movies displayed there and we capture actually whatever which one is has
been clicked.
So in here we have selected movie.
So now it's a good time to introduce a new component.
So we have a movie list now.
And we will create a new component that will be movie details.
So let's create that here.
Right click new File and I will do movie details JSX x here.
And basically just to speed things up I can open movie list and I can copy everything.
And I would movie details and I will put put it there.
At the moment we let's clean it up and I will remove most of the things in a component here like that.
And we will have movie the details component.
So basically I have a fresh new component, new component.
And I can display that here.
So let's say I will have H1 and I will do movie details.
Component and component.
So basically that's what I will render.
I will go to my parent which is app.js.
And in the same way as we've done it here we need to import that.
So import movie details.
And that will auto complete for me.
So movie details has been imported from components movie details.
So I will go here.
And instead of displaying that H1 I can do movie details and finish that with a closing that tag.
So I will save it.
Go back to application.
You see this is rendered in my component now.
So what we want to do is we will whatever we click on this and we store it in our app.js state, we
can pass it to another component.
And that's what we will do.
So I will go here inside the movie details.
What I can do is I can pass some data so I can pass movie.
I can name it whatever I like.
And what I need to pass is I need to pass that selected movie.
So selected movie will come from here.
It will be safe in state and we will pass it to another component there.
So this time we refer this as a movie.
But in our component here is selected movie.
You can name it as you like.
But the first bit here is that what is going as a prop.
So this is movie that what we will use in our component.
So we will save it.
And if I will go to movie details.
So from here what I could do is I could display that in um here in that component so I can remove this.
And I could have curly braces and I can do movie and I can display for example, title, but this can
go as null.
So if I will go back to the beginning, if I will refresh this, this will give me an error, because
I'm trying to display a title of something that is by default null.
So if I go here you see selected movie when you start the application.
This is no.
And that's what I'm passing here.
So we need to actually check it.
If we have that movie there's a few ways to do it.
I could do a check here if movie.
Like that.
If movie then returns something, I could check if I have the movie and return something here or.
But it will still, I will need to do some check checking here.
So if I could do kind of check property, check if I have the movie available.
So if movie and then I can do end end.
That means it will trigger this only when this is available.
So in JavaScript when we do syntax like this, every single bit of code will be checked first.
If one of these fail, then another one is not going to be triggered.
So if there is no movie, the movie title is not going to trigger.
So if I will go here and I don't have that error anymore, so what I can do is click here.
Titanic and Avatar, Titanic and avatar.
So you see this is working.
So we have that check already here so we can check if we have movies, then do we display title?
What I could do is I can duplicate this and we can also display a description description here.
And let's say I will put it as a paragraph a paragraph here.
And so if we'll have this back again you can see here I can click on this one and this one.
And I have both title and description.
Actually I don't like the style.
Everything is styled as a a as a header here.
So if I will go to app CSS I think I have a for app header font size.
This this is way too big.
I will just remove it from there.
And if I will go here you can see it's much smaller but everything is much smaller.
So if I will go back here and go back up header, everything is actually in the header here.
So what we could do is we can get this away from here and put it outside.
Header.
Header will be with that styling here.
So it's fine for header but not for everything else.
So if I go here it is much much better.
We will do some styling later on.
I will actually can make it a little bit bigger for you to see, but we can still use it the same way
as we've done before.
So we have the data displayed there.
I can go back to my code and I can close this for now and go to the movie details.
But what we are doing here is basically we've checked the movie twice.
If that exists, it doesn't really.
It's not a good way to to do it.
What we could do is we can have a div.
Here.
And inside that div I can check if we have that movie.
So like that.
And also I can close it like that.
So basically I'm checking here.
If I have a movie then I will display that diff.
So in that case I can put it everything inside here in that diff.
And I can remove this because I will be pre-checking if that movie exists here, and then display that
in the diff inside.
Otherwise I'm not gonna do this.
So I will make it a little bit clear.
So I'm checking if I have a movie.
Then I will display this.
So I don't need to check in the movie for every single thing I will use inside.
So if I would go back here, we actually refresh it and I can see everything is working the same as
it was before.
So this is already done.
What we've done in this video is we take the selected movie, we pass it, pass it as a param parameter
here as a props into our new component and a new component, we check it.
We receive that movie here, we check it if that exists, and then we display title and description.